图片懒加载[lazyload images]之H5原生

图片懒加载，其实就是利用占位符占据图片位置，优化图片加载。

在jquery时代，一般的用法就是 jquery.lazyload.js，https://plugins.jquery.com/lazyload/

但是，现在H5原生支持了，喜奔大普呀

https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes

相比之前的loading=lazy，lazyload控制的更加精细

<img loading="lazy" src="demo.png" >

现在

<img lazyload="auto" src="demo.png" >
<img lazyload="on" src="demo.png" >
<img lazyload="off" src="demo.png" >

具体的支持情况：https://caniuse.com/?search=%20lazyload

具体的参考文章：https://imagekit.io/blog/lazy-loading-images-complete-guide/

这个是原生支持的，性能方面当然也是更好的，​不信自己可以测试下。因为不再需要监听浏览器呀​

如果不只是加载图片，如加载组件啥的，比如图表，推荐阅读：

《图表列表性能优化：可视化区域内最小资源消耗》,https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0619_8640.html

这里介绍的更加详细。

转载本站文章《图片懒加载[lazyload images]之H5原生》, 请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0927_8680.html