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

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

Author: DeathGhost
Published: 2019-12-19 23:20:01
Category: html
Canonical: https://www.deathghost.cn/article/html/61
Keywords: HTML, 图片, 懒加载, 延迟加载, 加载图片, 延迟加载属性, loading, lazy, eager, 图片加载

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

例如[Angular](https://www.deathghost.cn/catalog/angular)项目中的路由懒加载一般，至其则加载，否则，不加载。以免造成不必要的请求加载任务。

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

![浏览器图片懒加载(延迟加载)](https://www.deathghost.cn/public/upload/article/2019/12/20/1576772791897557.jpg)

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

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

## 🙌 使用方法

<img src="deathghost.jpg" loading="lazy" alt="新码笔记" />
// MORE ...
其中元素属性loading就是今天所要了解的属性。

## 🎡 属性loading可选值

loading="lazy"
loading="eager"
lazy 懒加载，即：延迟获取资源。

eager 立即加载，即：默认状态。

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

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

## 📐 示例

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

1、第一张图片使用lazy

2、第二张图片使用eager

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

[演示地址](https://codepen.io/deathghost/full/NWPpVyM)及其浏览器请求结果，我们可以看出第一张图片将被最后执行加载：

![浏览器图片属性loading="lazy"延迟请求加载资源](https://www.deathghost.cn/public/upload/article/2019/12/21/1576905359399945.jpg)

示例演示 浏览器图片属性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
最后，此属性也可以应用在<iframe>标签上。阅读&ldquo;[延迟加载IFRAME](https://www.deathghost.cn/article/html/80)&rdquo;

## Related

- Previous: [WebVTT文件为HTML视频 video 元素添字幕](https://www.deathghost.cn/article/html/44)
- Next: [分享URL地址到微信朋友圈没有缩略图？](https://www.deathghost.cn/article/html/125)