管理杂谈OA答疑ERP答疑教程搜索

【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" />

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


更多精彩文章浏览...
点击右上角图标分享到朋友圈
官方网站:http://www.clicksun.cn
咨询热线:400-186-1886
服务邮箱:service@clicksun.cn