图片懒加载—免JS基于＜img＞元素原生属性实现

图片懒加载——具体属性：loading

        指示浏览器应当如何加载该图像。

⭐️允许的值：

• eager

        立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。

• lazy

        延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。

⭐️使用案例：

<img src="text.jpg" loading="lazy"><img>

---

下载资源重要性——具体属性：importance

        指示下载资源时相对重要性，或者说优先级。

⭐️允许的值：

• auto

        不指定优先级。浏览器可以使用自己的算法来为图像选择优先级。

• high

        此图像在下载时优先级较高。

• low

        此图像在下载时优先级较低。

⭐️使用案例

<img src="text.jpg" importance="auto"><img>

---

 那些你不知道的<img>属性：

<img>：图像嵌入元素 - HTML（超文本标记语言） | MDN