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

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

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

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

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

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

谷歌浏览器自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 所有,文章内容系作者个人观点,不代表 蓝点网 对观点赞同或支持。如需转载,请注明文章来源。
2
topgamer
阿里云香港免备案服务器低至9.9元每月 欲购从速京东双11巅峰48小时,点击立即领取无门槛红包和满减优惠券

评论:

8 条评论,访客:8 条,站长:0 条
  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. 木头科学二百五
    木头科学二百五发布于: 
    Google Chrome 75.0.3759.0 Google Chrome 75.0.3759.0 Windows 10 64位版 Windows 10 64位版

    好,又来一个事实标准语法糖

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

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

  4. Elephant
    Elephant发布于: 
    Firefox 63.0 Firefox 63.0 Windows 7 64位版 Windows 7 64位版

    看看我的小尾巴!!

  5. 智障大师
    智障大师发布于: 
    Google Chrome 73.0.3683.103 Google Chrome 73.0.3683.103 Windows 10 64位版 Windows 10 64位版

    有油猴脚本吗?

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

      和油猴脚本有什么关系???

      • 智障大师
        智障大师发布于: 
        Google Chrome 73.0.3683.103 Google Chrome 73.0.3683.103 Windows 10 64位版 Windows 10 64位版

        油猴脚本能做到滞后加载嘛

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

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

发表评论