原生图片懒加载

语法

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">

要注意的是，不要给首屏出现在可视区域的图片设置懒加载，因为它本身就在可视区域，应该尽快加载，以让用户尽早看到图片。另外，使用懒加载的图片应该尽量设置宽高，这样可以避免抖动：在等图片加载的时候，相应区域会显示为空白，其他元素不会占位。如果不设置宽高，其它元素就有可能会占位，图片加载完成之后，又会把占位的元素挤下去，造成抖动。

原生支持情况

对于不支持的浏览器会自动跳过该属性，以默认方式加载。