【WEB】无需JS或第三方库，使用img标签的loading=＂lazy＂属性简单实现浏览器级别的图片动态滚动懒加载

使用 loading 属性实现浏览器级别的图片懒加载

图片懒加载是日常开发中的常见需求。我们在实现懒加载时大多数会使用一些现成的库或者基于 Intersection Observer API 进行处理

不过很多同学不知道的是：img 标签的 loading 属性可以让你在不编写JavaScript代码或使用第三方库的情况下启用浏览器级别的图片懒加载。

看下面的源代码：

＜div style="height: 2000px"＞＜/div＞

＜img src="https://gips3.baidu.com/it/u=45328832,131546734&fm=3039&app=3039&f=JPEG?w=1024&h=1024" loading="lazy" /＞

以这种方式实现图片懒加载的功能，当页面往下滚动的时候，图片动态加载：