谷歌浏览器自v75版开始将支持原生的图片视图延迟加载属性

谷歌浏览器开发工程师发布的博客显示，谷歌浏览器已开始在金丝雀版中测试原生的图片视图延迟加载属性。

延迟加载即用户打开网页时只有出现在屏幕中的图片会被加载，其余图片将在页面滚动到对应位置后再加载。

延迟加载给用户带来的直观感受就是网页加载的速度明显提升，因为不需要一次性将页面所有资源全部加载。

对于网站和开发者来说延迟加载也有助于降低服务器带宽开支，避免加载不会展示的图片浪费带宽流量资源。

当然延迟加载有时候可能也会造成困扰，如用户快速滚动页面时需要加载被延迟的图片、进而消耗部分时间。

原生支持的延迟加载属性：

当前其实已经有不少开发者使用JavaScript脚本进行延迟加载， 不过谷歌浏览器开始原生支持延迟加载技术。

开发者只需要在图片属性里标记延迟加载即可，浏览器在读取资源时会按照屏幕滚动和展示的情况进行加载。

延迟加载属性支持图片以及在 iframe 嵌套框架中的视频， 具体可以参考谷歌浏览器工程师提供的示例代码。

示例代码：

 !-- Lazy-load an offscreen image when the user scrolls near it -- 

 img src="unicorn.jpg" loading="lazy" alt=".."/ 

 !-- Load an image right away instead of lazy-loading -- 

 img src="unicorn.jpg" loading="eager" alt=".."/ 

 !-- Browser decides whether or not to lazy-load the image -- 

 img src="unicorn.jpg" loading="auto" alt=".."/ 

 !-- Lazy-load images in picture . img is the one driving image 

loading so picture and srcset fall off of that -- 

 picture 

 source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x" 

 source srcset="small.jpg 1x, small-hd.jpg 2x" 

 img src="fallback.jpg" loading="lazy" 

 /picture 

 !-- Lazy-load an image that has srcset specified -- 

 img src="small.jpg"

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

sizes="(min-width: 36em) 33.3vw, 100vw"

alt="A rad wolf" loading="lazy" 

 !-- Lazy-load an offscreen iframe when the user scrolls near it -- 

 iframe src="video-player.html" loading="lazy" /iframe 

其中延迟加载还支持以下几种属性：

1. 当loading属性为lazy时表示此资源适合进行延迟加载， 浏览器读取后会按照用户操作行为进行延迟加载。

2. 当loading属性为eager时表示此资源不适合进行延迟加载， 开发者可以利用此属性强制浏览器立即加载。

3. 当loading属性为auto时表示此资源既可以延迟加载也可以立即加载，具体由浏览器自行判断怎么去加载。

31435.html