JS实现图片懒加载(lazyload)过程详解

原理

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

注：图片要指定宽高

\<img src="default.jpg?imageMogr2/format/webp" data-src="/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg?imageMogr2/format/webp" />

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

代码