图片懒加载，其实就是利用占位符占据图片位置，优化图片加载。
在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控制的更加精细
代码语言：javascript复制<img loading="lazy" src="demo.png" >现在
代码语言：javascript复制<img lazyload="auto" src="demo.png" >
<img lazyload="on" src="demo.png" >
<img lazyload="off" src="demo.png" >具体的支持情况：https://caniuse.com/?search= lazyload
具体的参考文章：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
