Google Chrome 75版本将支持原生懒加载

发布时间:2019-08-07 18:23:57 阅读:90
所谓懒加载,就是当浏览网页时,如果开启了图片懒加载,则会在图片滚动到窗口可视区域时才会加载。相比没有开启图片懒加载的网页,会节省很多的网络请求;对于移动端来说,会节省很多的网络流量。

从Chrome 76开始,我们可以使用新的loading属性来延迟加载资源,而无需编写自定义的延迟加载代码或使用单独的javascript库。

为什么要开启懒加载

在大部分网站中,除了视频文件比较大以外,其次就是图片文件了,并且很多网站都会在页面中加入很多的图片来丰富内容。图片作为网页中很重要的角色,通常会比其他文件资源占用更多带宽。如果将网页内的图片全部一股脑的加载,对网站加载速度、用户浏览都是一种糟糕的体验。

Google Chrome 75版本将支持原生懒加载

而开启了图片懒加载后,会减少服务器的请求数量,提高网站加载速度,对于有流量限制的虚拟主机来说是一个非常不错的选择。

嵌入式iframe也会使用大量数据,并且可能会损害页面性能。只有在用户可能看到它们时才加载非关键,低于折叠的图像和iframe,这会缩短页面加载时间,最大限度地减少用户带宽,并减少内存使用量。

开启了懒加载后的效果:

开启图片懒加载

目前开启懒加载有两种方法:

  1. 使用第三方js库,比如 lazyload.js或其他js库。
  2. 使用浏览器原生支持的方法。

目前只有Google Chrome 75以上版本浏览器支持图片原生懒加载,其他浏览器未知。

要使用原生图片懒加载,需要使用Google Chrome 75版本以上的浏览器。

在Chrome 75中,您可以使用该loading属性使用原生懒加载:

	<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe> 

loading属性

该属性一共有三个值,分别是:

  • lazy:对资源进行延迟加载。。
  • eager:立即加载资源。
  • auto:浏览器自行判断决定是否延迟加载资源。

该功能将继续更新,直到它在稳定版本(最早的Chrome 76)中启动。但您可以通过在Chrome 75中启用以下设置来尝试:

  • chrome://flags/#enable-lazy-image-loading
  • chrome://flags/#enable-lazy-frame-loading

在设置了loading属性后,如果需要判断浏览器是否支持原生懒加载来兼容旧版本的浏览器,需要在文档底部添加以下代码:

	if ('loading' in HTMLImageElement.prototype) {
  // 浏览器支持原生懒加载
} else {
  // 如果浏览器不支持原生懒加载,则回退其他方法
} 

例如, lazysizes.js是一个流行的JavaScript延迟加载库您可以检测对该loading属性的支持,以便仅在loading不支持时将lazysize作为回退库加载。其工作原理如下:

  • 替换 <img src><img data-src> ,以避免在不支持的浏览器的渴望负荷。 如果 loading 属性支持,交换 data-srcsrc
  • 如果 loading 不受支持,请加载后备(lazysizes)并启动它。 您可以使用 class=lazyload 一种方式来指示lazzysize哪些图像是延迟加载的。
	<!-- 正常加载图像 -->
<img src="hero.jpg" alt="…">

<!-- 使用浏览器原生懒加载方式加载图像 -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img.lazyload');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // 如果浏览器不支持原生懒加载,则使用lazysizes.js来进行懒加载
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script> 

我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"Google Chrome 75版本将支持原生懒加载",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560