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

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2024年3月30日 12:35 本文热度 554

使用 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" />

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

该文章在 2024/3/30 12:36:56 编辑过