懒惰加载是懒惰加载的作用简单地实现未来
什么是懒惰的道路
懒惰加载，即延迟加载。 简单来说，如果需要在长页面上显示很多图像，那么进入页面时一次加载完所有图像将需要很长时间。 为了提高用户体验，我们使用懒惰加载，在图像显示在浏览器可视区域时加载图像。 例如各种电子商务的页面。
懒惰加载的作用是加快打开页面的速度，提高用户体验，减轻服务器压力和浏览器负担的简单实现1，首先让我们看看一次加载20张图像需要多长时间。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' titlelazyload/titlestyleimg { display 3360 block； 高： 200 px； }/style/headbodyimgsrc='./5.1.png ' img src='./7.1.png ' img src='./8.1.png ' img src='./10.1.png 12.2.png ' img src='./12.3.png ' IIC 12.6.png ' img src='./12.7.png ' img src='./12.8.png ' img src=' .
我们把图像资源都写在了img的src上。 这个时候一次装载了全部。 所需时间220毫秒。
2、看看加载20张同样的图像需要多长时间。
//将上面代码的img设置为： img src='./loading.png ' img src='./loading.png ' img src='./loading.png ' img src='./ll loading ' loading.png ' img src='./loading.png ' img src='./loading.png ' img src loading ' img src loading.png ' img src='./loading.png ' img src='./loading.png ' img src='
此图像展示了20次，但都是相同的资源，所以您可以看到所有浏览器都只请求一次。 需要85ms。
3、经过以上实验，可以理解懒惰加载的原理。 就是只加载页面上显示的图像。 您尚未滚动的图像不会加载，而是全部替换为名为loading图像的单个图像。 那么，实际上我们进入页面的时候，只加载了loading图像和浏览器可视区域的n张图像。
img src='./loading.png ' data-src='./5.1.png ' img src='./loading.png ' data-src='./7.1.png ' gt
;<img src="./loading.png" data-src="./8.1.png"><img src="./loading.png" data-src="./10.1.png"><img src="./loading.png" data-src="./10.2.png"><img src="./loading.png" data-src="./10.3.png"><img src="./loading.png" data-src="./10.4.png"><img src="./loading.png" data-src="./12.1.png"><img src="./loading.png" data-src="./12.2.png"><img src="./loading.png" data-src="./12.3.png"><img src="./loading.png" data-src="./12.4.png"><img src="./loading.png" data-src="./12.5.png"><img src="./loading.png" data-src="./12.6.png"><img src="./loading.png" data-src="./12.7.png"><img src="./loading.png" data-src="./12.8.png"><img src="./loading.png" data-src="./12.9.png"><img src="./loading.png" data-src="./12.10.png"><img src="./loading.png" data-src="./12.11.png"><img src="./loading.png" data-src="./12.12.png"><img src="./loading.png" data-src="./12.13.png"><script> function lazyload(){ var imagesList = document.getElementsByTagName('img'); // 获取所有图片列表 var length = imagesList.length; // 一共有多少张图片 var n = 0; // n用来保存之前已经加载过的多少张图片，就可减少下面遍历的次数 return function(){ var clientHeight = document.documentElement.clientHeight; // 浏览器可视区域的高度 var scrollTop = document.documentElement.scrollTop; // 页面被遮挡的高度 for(var i = n;i<length;i++){ if(imagesList[i].offsetTop<clientHeight+scrollTop){ // offsetTop获取图片顶部相对于页面顶部的距离，当它小于浏览器可视区域的高度和页面被遮挡的高度之和时，加载图片 if(imagesList[i].getAttribute('src')==='./loading.png'){ //当该img的路径为'./loading.png'时才把图片的真实路径赋值给src imagesList[i].src = imagesList[i].getAttribute('data-src'); } n = n + 1; }else{ break; } } } } var a = lazyload(); a(); window.addEventListener('scroll', a, false); // 监听页面滚动事件，执行lazyload函数。</script>我们通过计算浏览器的高度clientHeight和页面的被遮挡的高度scrollTop的和，再计算图片的顶部与该页面顶部的距离offsetTop，最后比较它们的大小。使还未出现在页面中的图片不加载，来实现懒加载。看看效果，我们的可视区域只有3张图片，一共加载的图片资源为1张loading图片和3张可视区域的图片，共用时90ms。相对于不使用懒加载，一次性加载20张图片的220ms，节省了用户的130ms的等待时间。在图片量多的网站中，效果更为明显。
参考资料：
延迟加载(Lazyload)三种实现方式
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/jxiJvQc-gVg
Chromium 官方支持的 image 懒加载将在 Chrome 75 发布，也就是说，将来只需要使用<img loading="lazy"> 就可以指定某个图片只在滚动到附近的时候加载。