HTML <img> loading 属性
实例
向首屏下方的图像添加延迟加载：
<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" 添加到位于首屏下方的图像。
浏览器支持
| 属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | 不支持 | 64.0 |
语法
<img src="URL" loading="eager|lazy">
属性值
| 值 | 描述 |
|---|---|
| eager | 默认。立即加载图像。 |
| lazy | 延迟加载图像，直到满足某些条件。 |