loading
HTML <img> loading 属性
页面底部的几个图片添加延迟加载，只有鼠标滚动到该图片所在位置才会显示：
<p>进入页面立即加载的图片</p>
<img decoding="async" src="/demo_source/beijing.jpg" alt="Wedding"/>
<img decoding="async" src="/demo_source/shanghai.jpg" alt="Rocks"/>
<p>图像延迟加载，只有鼠标滚动到该图片所在位置才会显示</p>
<img decoding="async" src="/demo_source/wuhan.jpg" alt="Paris" loading="lazy"/>
<img decoding="async" src="/demo_source/shanghai-1.jpg" alt="Nature" loading="lazy"/>
<img decoding="async" src="/demo_source/shanghai-2.jpg" alt="Underwater" loading="lazy"/>
<img decoding="async" src="/demo_source/shanghai-3.jpg" alt="Ocean" loading="lazy"/>
<img decoding="async" src="/demo_source/shanghai-4.jpg" alt="Mountains" loading="lazy"/>
提示
一般在网络延迟较大时，延迟加载的效果及优势明显，这里不做演示
定义和用法
loading 属性指定浏览器是应立即加载图像还是延迟加载图像。
设置 loading="lazy" 只有鼠标滚动到该图片所在位置才会显示。
语法
<img decoding="async" src="URL" loading="eager|lazy">
属性值
| 值 | 描述 |
|---|---|
| eager | 默认，图像立即加载。 |
| lazy | 图像延迟加载，只有鼠标滚动到该图片所在位置才会显示。 |
浏览器兼容性
loading | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|