HTML <img> 标签的 loading 属性

HTML <img> 标签

实例

向首屏下方的图像添加延迟加载：

<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">
<!-- 屏幕外的图像 -->
<img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-2.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="体育公园" style="width:100%" loading="lazy">

定义和用法

loading 属性规定浏览器是应该立即加载图像还是推迟加载屏幕外图像，例如用户滚动到它们附近时。

提示：请仅将 loading="lazy" 添加到位于首屏下方的图像。

浏览器支持

属性
loading	77.0	79.0	75.0	不支持	64.0

语法

<img src="URL" loading="eager|lazy">

属性值