HTML <img> loading 属性
实例
页面底部的几个图片添加延迟加载，只有鼠标滚动到该图片所在位置才会显示：
<imgdecoding="async"src="/images/wedding.jpeg"alt="Wedding"style="width:100%"><imgdecoding="async"src="/images/rocks.jpeg"alt="Rocks"style="width:100%"><!-- 设置延迟加载的图片 --><imgdecoding="async"src="/images/paris.jpeg"alt="Paris"style="width:100%"loading="lazy"><imgdecoding="async"src="/images/nature.jpeg"alt="Nature"style="width:100%"loading="lazy"><imgdecoding="async"src="/images/underwater.jpeg"alt="Underwater"style="width:100%"loading="lazy"><imgdecoding="async"src="/images/ocean.jpeg"alt="Ocean"style="width:100%"loading="lazy"><imgdecoding="async"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 decoding="async" src="URL" loading="eager|lazy">
属性值
| 值 | 描述 |
|---|---|
| eager | 默认，图像立即加载。 |
| lazy | 图像延迟加载，只有鼠标滚动到该图片所在位置才会显示。 |
HTML <img> 标签