Lxn-Chan!

(~ ̄▽ ̄)→))* ̄▽ ̄*)o

原生图片懒加载

语法

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+

 简单说两句



联系站长 | 安装证书 | 友情链接

备案号:辽ICP备19013963-5号

萌ICP备 20219421 号

中国互联网违法和不良信息举报中心

架构版本号:8.0.3 | 本站已全面支持IPv6

本站由又拍云提供CDN加速服务和存储服务

正在载入运行数据(1/2)请稍后...
正在载入运行数据(2/2)请稍后...

Copyright 2022 LingXuanNing, All rights reserved.