HTML <img> loading 属性

HTML <img> 标签

定义和用法

loading 属性规定浏览器是否应立即加载图像，还是推迟加载屏幕外的图像，直到例如用户滚动到它们附近。

提示：请仅将 loading="lazy" 添加到位于屏幕下方的图像。

实例

向首屏下方的图像添加延迟加载：

<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">

<!-- 屏幕外的图像 -->
<img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-2.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="上海" style="width:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="体育公园" style="width:100%" loading="lazy">

亲自试一试

语法

<img src="URL" loading="eager|lazy">

属性值

值 描述
eager 默认。立即加载图像。
lazy 延迟加载图像，直到满足某些条件。

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
77.0 79.0 75.0 不支持 64.0

HTML <img> 标签