1、什么是懒加载
懒加载也就是延迟加载。页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
2、为什么使用懒加载？
很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面，这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。因此懒加载能节约性能消耗，缩短onload事件时间。
3、懒加载的优点？
页面加载速度快、可以减轻服务器的压力、节约了流量、用户体验好。
4、懒加载实现方式？
（1）纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟。
（2）条件加载，符合某些条件，或触发了某些事件才开始异步下载。
（3）可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
5、图片懒加载的实现步骤？
（1）首先，不要将图片地址放到src属性中，而是放到其它属性(data-src)中。
（2）页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-src属性中的值取出存放到src属性中。
（3）在滚动事件中重复判断图片是否进入视野，若进入则将data-src属性中的值取出存放到src属性中。
<body> <img data-src="./images/1.jpg" alt=""> <img data-src="./images/2.jpg" alt=""> <img data-src="./images/3.jpg" alt=""> <img data-src="./images/4.jpg" alt=""> <img data-src="./images/5.jpg" alt=""> <img data-src="./images/6.jpg" alt=""> <img data-src="./images/1.jpg" alt=""> <img data-src="./images/2.jpg" alt=""> <img data-src="./images/3.jpg" alt=""> <img data-src="./images/4.jpg" alt=""> <img data-src="./images/5.jpg" alt=""> <img data-src="./images/6.jpg" alt=""> </body>
<script> var imgs = document.querySelectorAll('img'); //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部 function getTop(e) { let T = e.offsetTop; while(e = e.offsetParent) { T += e.offsetTop; } return T; } function lazyLoad(imgs) { let H = document.documentElement.clientHeight; //获取可视区域高度 let S = document.documentElement.scrollTop || document.body.scrollTop; for (let i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src'); } } } window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发 lazyLoad(imgs); } </script>
