如何实现懒加载

<!--图片地址暂时先保存在data-src这个自定义属性上面-->

<img data-src="./img-loop/img/1.jpg" alt="懒加载1" />

<img data-src="./img-loop/img/2.png" alt="懒加载2" />

<img data-src="./img-loop/img/3.jpg" alt="懒加载3" />

<img data-src="./img-loop/img/4.jpg" alt="懒加载4" />

<img data-src="./img-loop/img/5.jpg" alt="懒加载5" />

<js>

const imgs = document.getElementsByTagName('img');

function lazyLoad(imgs) { // 视口的高度；

const clientH = document.documentElement.clientHeight; // 滚动的距离，这里的逻辑判断是为了做兼容性处理；

const clientT = document.documentElement.scrollTop || document.body.scrollTop;

for(let i = 0; i < imgs.length; i++) {

// 逻辑判断，如果视口高度+滚动距离 > 图片到浏览器顶部的距离就去加载；

// !imgs[i].src 是避免重复请求，可以把该条件取消试试：可以看到不加该条件的话往回滚动就会重复请求；

if(clientH + clientT > imgs[i].offsetTop && !imgs[i].src) {

imgs[i].src = imgs[i].dataset.src;// 使用data-xx的自定义属性可以通过dom元素的dataset.xx取得；

} } };

lazyLoad(imgs); // 一开始能够加载显示在视口中的图片；

window.onscroll = () => lazyLoad(imgs);// 监听滚动事件，加载后面的图片；