懒惰加载概念：打开一个页面时，首先只加载浏览器显示区域中的图像，当用户向下拖动滚动条时继续加载下一个图像。 另外，只加载当前显示区域内的图像。 毫无疑问，这里需要使用鼠标滚轮进行事件拦截。
why使用懒惰的道路吗？ 打开页面时，浏览器从上到下读取页面中标签src的地址，并打开线程进行加载。
如果用户的网络速度较慢，或者此页上的图像太多，则所有图像都加载了一点，但加载未完成，最后会出现不正常显示的图像。 一方面使用户体验非常差，另一方面，每次加载每个图像时向服务发送请求会增加服务压力。
实现想法：
写标签时，首先将src的值设置为较小的默认图像，然后自定义data-src属性以存储实际显示的图像路径。 加载页面时，最初是默认图像，处于可见区域时，将存储在data-src中的真实路径指定给src属性，然后开始加载。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/titlestyletype=' text/CSS '/style/head body dy margin: 0 auto 50px； width: 660px； 高： 740 px； }/style/headbodyimgsrc=' default.jpg ' data-src=' https://HB img.huabanimg.com/857 ca2AC 0047298 f 0109 b8b 488 f 0a1d 29240 a 07 c 20 ce3- tfc PFR _ fw 658 ' alt=' img src=' default.jpg ' data-src=' 3358 hbii 3668 ull _ fw 658 ' alt=' img src=' default.jpg ' data-src=' http://n.xomq-fxunyyf 6357658.png ' alt=' img src=' defrc t 0158 d9ce 33986 f 6090.jpg ' alt=' img src=' default.jpg ' data-src=' https://i0.hdslb.com/bfs/article/AC e350 B1 a3 a 38d b7FCE 60 aa 9699 C4 c 056 ee 80638.jpg ' alt=' img src=' default.jpg ' data-src=' http://img.HB.aicdn.CCC mmnu _ fw 658 ' alt=' img src=' default.jpg ' data-src=' 33585 b005 c 07709 f 355 bb 4f7ab a5 dec 61 ff88 a7c4. jpg ' alt=' imin uppi Tang 20180801083850 _ juz en.thumb.400 _0. jpg ' alt=' img src=' default.jpg ' data-src=' 3http://img.qzhi
.aicdn.com/09ae7fb96159a07cc4f993c166dcf9c546818c3047a41-Fm6Wgt_fw236" alt=""> <img src="default.jpg" data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t01ec96c4bb1b4e380b.webp" alt=""> <img src="default.jpg" data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t01ec96c4bb1b4e380b.webp" alt=""> <img src="default.jpg" data-src="https://5b0988e595225.cdn.sohucs.com/q_70,c_ttdkn,w_640/images/20170903/5ee461b1464b492fb5b033b34d06adcb.jpeg" alt=""> <img src="default.jpg" data-src="https://p2.ssl.qhimgs1.com/sdr/400__/t0106ff1c580238fa02.webp" alt=""> <img src="default.jpg" data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01a834ab8bd0a890c6.webp" alt=""> <img src="default.jpg" data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01ba9ad7091a098934.webp" alt=""> <img src="default.jpg" data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t01b6689727e2c7470b.webp" alt=""> </body> <script> var num = document.getElementsByTagName('img').length; var img = document.getElementsByTagName("img"); // 存储图片加载到的位置，避免每次都从第一张图片开始遍历 var n = 0; // 页面载入完毕加载可视区域内的图片 lazyload(); window.onscroll = lazyload; // 监听页面滚动事件 function lazyload() { // 可见区域高度 var seeHeight = document.documentElement.clientHeight; // 滚动条距离顶部高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for (var i = n; i < num; i++) { if (img[i].offsetTop < seeHeight + scrollTop) { if (img[i].getAttribute("src") == "default.jpg") { img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } } </script></html></body></html> // 可见区域高度var seeHeight = document.documentElement.clientHeight;console.log(seeHeight)运行效果：
运行效果：
上面的这段代码，|| 是为了做一个不同浏览器运行下的兼容处理。
来都来了再详细了解一下:
1.各浏览器下 scrollTop的差异:
IE6/7/8：
可以使用 document.documentElement.scrollTop；
IE9及以上：
可以使用window.pageYOffset或者document.documentElement.scrollTop
Safari:
safari： window.pageYOffset 与document.body.scrollTop都可以；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者 document.documentElement.scrollTop
Chrome：
谷歌浏览器只认识document.body.scrollTop;
注：标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.
offsetTop:当前对象到其上级层顶部的距离。
scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离
getAttribute() :方法返回指定属性名的属性值。
懒加载在面试中也会被经常问到？
比如让你解释下他的概念，以及优点。
概念在后面就不多赘述了，根据上面的来进行一个优点的总结。
1.减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。
2.减少了同一时间发向服务器的请求数，大大减轻了服务器的压力。