DeathGhost

浏览器图片属性loading="lazy"延迟请求加载资源

这篇文章发布于

DeathGhost 编辑, 归类于HTML »

HTML元素<img>延迟加载属性 —— loading属性值lazy允许浏览器选择性加载IMG元素,根据用户滚动操作至其元素附近执行加载,一定程度起到节流的作用。

懒加载延迟加载亦或所谓的按需加载,通常在业务项目中,我们会考虑到此场景该如何处理?

例如Angular项目中的路由懒加载一般,至其则加载,否则,不加载。以免造成不必要的请求加载任务。

这里看看关于图片懒加载,同样的道理,在图片位置未至用户视窗范围或屏幕位置时不予请求加载资源,直至其附近位置方可请求加载。

浏览器图片懒加载(延迟加载)
浏览器图片懒加载(延迟加载)

业务场景,当前页面图片元素过多,避免不必要的流量浪费。

🙌 使用方法

<img src="deathghost.jpg" loading="lazy" alt="新码笔记" />
// MORE ...

其中元素属性loading就是今天所要了解的属性。

🎡 属性loading可选值

loading="lazy"
loading="eager"

lazy 懒加载,即:延迟获取资源。

eager 立即加载,即:默认状态。

字面意思我们也可以了解其作用。

👀 起始加载会从当前滚动位置所加载,随着滚动方向而加载。若测试,可用Chrome76 版本测试,具体浏览器支持可以参考caniuse查询。

📐 示例

这里演示暂时使用三张图演示看其请求加载顺序。

1、第一张图片使用lazy

2、第二张图片使用eager

3、第三张图片默认不添加loading属性

演示地址及其浏览器请求结果,我们可以看出第一张图片将被最后执行加载:

浏览器图片属性loading="lazy"延迟请求加载资源
示例演示 浏览器图片属性loading="lazy"延迟请求加载资源
1564213788702.jpg	200	jpeg	lazyLoading.html	26.0 KB	128 ms
1576772791897557.jpg	200	jpeg	lazyLoading.html	20.9 KB	88 ms
1576343625020465.jpg	200	jpeg	lazyLoading.html	24.8 KB	115 ms
在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕