如何详细解析使用JavaScript实现图片懒加载（lazyload）的JS过程？

本文共计1316个文字，预计阅读时间需要6分钟。

对于图片较多的页面，使用懒加载可以有效提升页面加载速度，优化用户体验。懒加载的意义在于（为什么使用懒加载）：它能够减少初始页面加载的数据量，加快页面显示速度。对页面加载速度影响最大的是图片，一张普通的图片就能达到显著的效果。

对于图片较多的页面，使用懒加载可以大幅提高页面加载速度，提高用户体验。

懒加载的意义（为什么要使用懒加载）

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注：图片要指定宽高

<img src="default.jpg" data-src="img.558idc.com/uploadfile/allimg/210405/2005141510-1.jpg" />

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。