如何用JavaScript实现图片懒加载功能？

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

对于图片较多的页面，使用懒加载可以有效提升页面加载速度，优化用户体验。懒加载的意义在于为何要使用它？页面加载速度的影响最大因素就是图片，一张普通的图片就可以达到这个效果。

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

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

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

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

原理

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