原生图片懒加载
属性:loading
指示浏览器应当如何加载该图像。
可选值:
eager
立即加载图像,不管它是否在可视视口(visible viewport)之外(默认值)。
lazy
延迟加载图像,直到它和视口接近到一个计算得到的距离,由浏览器定义。
<img src="picture.jpg" loading="lazy"><img>
下载权重:importance
指示下载资源时相对重要性,或者说优先级。
可选值:
auto
不指定优先级。浏览器可以使用自己的算法来为图像选择优先级。
high
此图像在下载时优先级较高。
low
此图像在下载时优先级较低。
<img src="picture.jpg" importance="auto"><img>
loading和importance可搭配使用
<img src="picture.jpg" loading="lazy" importance="auto"><img>