几行代码，就写完懒加载啦？
Posted 野生切图仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了几行代码，就写完懒加载啦？相关的知识，希望对你有一定的参考价值。
Ⅰ、前言
- 「懒加载」是网页中非常 常见的；
- 为了减少系统的压力，对于一些电商系统出场频率非常高；
- 那么大家一般用什么方式去实现 「懒加载」 呢 ？
① 通过 scroll 的形式：
通过 滚动「
scroll」事件，然后去判断距离，当 距离到达一定范围，判断是否要加载资源；
② 通过 IntersectionObserver 的形式：
通过 元素与设备视窗或者其他指定元素发生交集的时候 => 「最底部的元素滚动到视口时」 ，判断是否要加载资源；
优势：
- 「
IntersectionObserver」不像「scroll」事件触发那么频繁 ， 对系统压力更小 ； - 不用计算距离，使用起来更加简单 ；
Ⅱ、概念与用法
IntersectionObserver构造函数需要传入一个回调函数；- 当 「首次加载」或 「元素与视窗发生交集 (或指定元素) 」 会执行这个回调函数；
- 通过
observer方法给定一个元素观察；
const observer = new IntersectionObserver(callback);
observer.observe(dom);
Ⅲ、用交叉观察器实现懒加载
- 首先我们创建
content用存放内容，每次加载再向其中加入更多内容 ； - 用 交叉观察器（
IntersectionObserver） 监听<footer>标签， 首次触发一下，当<footer>滚动到页面上时 - 然后写一个 添加的方法（例 ：
addItem），每次添加10条内容; - 过程如下 👇
<body>
<div class="content"></div>
<footer> 加载中。。。 </footer>
</body>
<script>
const footer = document.getElementsByTagName('footer')[0]
const observer = new IntersectionObserver((val) =>
addItem();
);
observer.observe(footer);
const content = document.getElementsByClassName('content')[0]
let num = 0;
function addItem()
for (let i = num; i < num+10; i++)
let node = document.createElement("div");
node.innerText = `第$i+1列`
node.className = 'item'
box.appendChild(content)
num = num + 10;
</script>
- 查看效果 👇
- 再添加一点样式 ，完整例子 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.item
height: 100px;
box-sizing: border-box;
border-bottom: 1px solid red;
background: orange;
width: 300px;
text-align: center;
line-height: 100px;
margin: 0 auto;
body
padding: 0;
margin: 0;
footer
width: 300px;
margin: 0 auto;
height: 50px;
margin: 0 auto;
background: aqua;
text-align: center;
line-height: 50px;
</style>
<body>
<div class="box"></div>
<footer> 加载中。。。 </footer>
</body>
<script>
const footer = document.getElementsByTagName('footer')[0]
const observer = new IntersectionObserver((val) =>
setTimeout(addItem, 300);
);
observer.observe(footer);
const box = document.getElementsByClassName('box')[0]
let num = 0;
function addItem()
for (let i = num; i < num + 10; i++)
let node = document.createElement("div");
node.innerText = `第$i + 1列`
node.className = 'item'
box.appendChild(node)
num = num + 10;
</script>
</html>
以上是关于几行代码，就写完懒加载啦？的主要内容，如果未能解决你的问题，请参考以下文章
微信小程序，后端用php写完接口，怎么把数据给前端，要带啥参数