原生图片懒加载
语法
1 | loading="auto|eager|lazy" |
示例
由浏览器自行决定
该状态下图片是否加载由浏览器自行决定。
1 | <img src="URL" loading="auto"> |
立即加载（默认）
指无论图片位于屏幕（页面）的任何位置，均在渲染html时一同渲染。与不加该参数效果相同。
1 | <img src="URL" loading="eager"> |
Lazy Load 懒加载
推迟图片的加载，当图片滚动到距离可视区域一定阈值（视浏览器的实现而定）的时候，再加载图片。
1 | <img src="URL" loading="lazy"> |
要注意的是，不要给首屏出现在可视区域的图片设置懒加载，因为它本身就在可视区域，应该尽快加载，以让用户尽早看到图片。另外，使用懒加载的图片应该尽量设置宽高，这样可以避免抖动：在等图片加载的时候，相应区域会显示为空白，其他元素不会占位。如果不设置宽高，其它元素就有可能会占位，图片加载完成之后，又会把占位的元素挤下去，造成抖动。
原生支持情况
对于不支持的浏览器会自动跳过该属性，以默认方式加载。
| 属性 | Chrome | Firefox | Opera | Edge | IE | Safari |
|---|---|---|---|---|---|---|
| loading | 77+ | 75+ | 64+ | 79+ | ❎ | ❎ |
