HTML <img> loading 属性 详解
HTML基础 2022-06-02 12:01:56小码哥的IT人生shichen
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">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>img loading 属性</h1>
<!-- 视口内可见 -->
<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">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
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 | 延迟加载图像，直到满足某些条件。 |
