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

Windows 10 Version 1903

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

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

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

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

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

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

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

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

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

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

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

示例代码:

<!-- 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时表示此资源既可以延迟加载也可以立即加载,具体由浏览器自行判断怎么去加载。

本文由来源 ADDYOSMANI,由 山外的鸭子哥 整理编辑,其版权均为 ADDYOSMANI 所有,文章内容系作者个人观点,不代表 蓝点网 对观点赞同或支持。如需转载,请注明文章来源。
已赞3
topgamer
哇哦恭喜您已成功屏蔽了蓝点网的小广告
   

评论:

8 条评论,访客:6 条,站长:2 条
  1. conight
    conight发布于: 
    Google Chrome 73.0.3683.103 Google Chrome 73.0.3683.103 Mac OS X 10.14.4 Mac OS X 10.14.4

    前端开发舒服了

  2. sufumin
    sufumin发布于: 
    Google Chrome 75.0.3752.2 Google Chrome 75.0.3752.2 Android 9 Android 9

    貌似Dev 75版本也在测试该功能

        • 山外的鸭子哥
          山外的鸭子哥发布于: 
          Google Chrome 73.0.3683.86 Google Chrome 73.0.3683.86 Windows 10 64位版 Windows 10 64位版

          这个不知道,不过也没必要,滞后加载图片类网站以及网速比较慢适合,不然其实用不上。蓝点网也用JavaScript延迟加载,但主要是为了反抓爬的

发表评论