图片懒加载

1、css

.img_box { margin-top: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid red; } .img_box>img { width: 450px; height: 500px; margin: 5px 0; } 

2、html

<div class="img_box">    <img src="/img/loading02.gif" data-src="/img/01.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/02.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/03.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/04.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/05.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/06.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/07.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/08.jpg" alt=""> <img src="/img/loading02.gif" data-src="/img/09.jpg" alt="">  // 1、获取一面图片标签元素 // 获取图片列表， // 即 img 标签列表 let imgs = document.querySelectorAll('img'); // 2、获取到浏览器顶部的距离 function getTop(e) { return e.offsetTop; }; // 3、懒加载实现 function lazyload(dataImg) { // 3.1、获取可视区域高度 let innerHeight = window.innerHeight; // 3.2、获取滚动区域高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < dataImg.length; i++) { // 3.3、如果图片距离顶部的距离大于 // 可视区域和滚动区域之和时触发懒加载 if ((innerHeight + scrollTop) > getTop(dataImg[i])) { // 3.4、真实情况是页面开始有 1 秒空白， // 所以使用 setTimeout 定时 1s (function(i) { setTimeout(function() { // 3.5、不加立即执行函数 i 会等于 9 // 隐形加载图片或其他资源， // 创建一个临时图片， // 这个图片在内存中不会到页面上去。 // 实现隐形加载 let temp = new Image(); // console.log('new：', temp); // 3.6、只会请求一次 temp.src = dataImg[i].getAttribute('data-src'); // console.log('src：', temp); // 3.7、onload 判断图片加载完毕， // 真实图片加载完毕， // 再赋值给 dom 节点 temp.onload = function() { // 3.8、获取自定义属性 data-src， // 用真图片替换假图片 dataImg[i].src = dataImg[i].getAttribute('data-src'); // console.log('dataImg：', dataImg[i].src); }; }, 1000); })(i); } } }; // 4、调用懒加载函数， // 传递图片标签元素 lazyload(imgs); // 5、滚动监听 window.onscroll = function() { // 调用懒加载函数 lazyload(imgs); }; };