HTML <img> loading 属性

HTML img 标签参考手册 HTML <img> 标签

实例

页面底部的几个图片添加延迟加载,只有鼠标滚动到该图片所在位置才会显示:

<img src="/images/wedding.jpeg" alt="Wedding" style="width:100%"> <img src="/images/rocks.jpeg" alt="Rocks" style="width:100%"> <!-- 设置延迟加载的图片 --> <img src="/images/paris.jpeg" alt="Paris" style="width:100%" loading="lazy"> <img src="/images/nature.jpeg" alt="Nature" style="width:100%" loading="lazy"> <img src="/images/underwater.jpeg" alt="Underwater" style="width:100%" loading="lazy"> <img src="/images/ocean.jpeg" alt="Ocean" style="width:100%" loading="lazy"> <img src="/images/mountainskies.jpeg" alt="Mountains" style="width:100%" loading="lazy">

尝试一下 ?

浏览器支持

属性
loading 77.0 79.0 75.0 Not Supported 64.0

定义和用法

loading 属性指定浏览器是应立即加载图像还是延迟加载图像。

设置 loading="lazy" 只有鼠标滚动到该图片所在位置才会显示。


语法

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

属性值

描述
eager 默认,图像立即加载。
lazy 图像延迟加载,只有鼠标滚动到该图片所在位置才会显示。


HTML img 标签参考手册 HTML <img> 标签