HTML img loading属性
loading属性
HTML img元素loading属性,可以指定网页中的图像是立即加载,还是推迟加载,比如当用户滚动页面到图像附近时,图像才开始加载。
语法
<img loading="value">
可选属性值
属性值 | 描述 |
---|---|
eager | 默认,即立即加载图像 |
lazy | 延迟加载图像,知道满足一定的条件 |
loading属性实例代码,及在线编辑器
可能是因为编辑器是在页面之中,当点击试一试按钮打开在线编辑器时,页面已经加载完成,因此实例在线展示的效果并不明显,有兴趣的可以将代码复制到一个html文件中,然后运行试一试(图片可以换成其它本地的图片):
<img src='../../static/img/bmi.jpg' width="100%";height="100%;">
<img src='../../static/img/bfr.jpg' width="100%";height="100%;" loading="lazy">
<img src='../../static/img/hipline.jpg' width="100%";height="100%;" loading="lazy">
<img src='../../static/img/hipline.jpg' width="100%";height="100%;" loading="lazy">
<img src='../../static/img/hipline.jpg' width="100%";height="100%;" loading="lazy">