【分享帖】原生JS实现最简单的图片懒加载

[zptcsoft]

懒加载

什么是懒加载

懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。

什么时候用懒加载

当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。

懒加载原理

我们都知道HTML中的<img>标签是代表文档中的一个图像。。说了个废话。。 <img>标签有一个属性是src，用来表示图像的URL，当这个属性的值不为空时，浏览器就会根据这个值发送请求。如果没有src属性，就不会发送请求。 嗯？貌似这点可以利用一下？ 我先不设置src，需要的时候再设置？ nice，就是这样。 我们先不给<img>设置src，把图片真正的URL放在另一个属性data-src中，在需要的时候也就是图片进入可视区域的之前，将URL取出放到src中。

文章来源

作者：axuebin 链接：https://juejin.im/post/59cb634a6fb9a00a4843bea9 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。