Google最近发布了Google Chrome 74，可以通过一个实验性开关对图片和iframe开启原生延迟加载（代号LazyLoad）特性。开启后，img和iframe标签会有额外的loading属性用于配置相关资源的延迟加载行为。延迟加载不可见内容可以减少数据和内存消耗，同时加快首要内容的展示。

Chrome 74现在支持对页面不可见区域的图片和iframe进行延迟加载，直到用户开始进入到指定的浏览距离。这个加载距离取决于网络速度等因素，内容通常是在刚好变成可见时完成加载。

网页设计者可以使用img和iframe标签的loading属性来控制和影响默认延迟加载行为：

lazy：表示这个元素适合延迟加载。
eager：表示这个元素不适合延迟加载，需要马上加载。
auto：让浏览器来决定是否需要延迟加载。当loading属性设置为auto时，相当于未设置该属性。

目前只有Chrome支持延迟加载特性。开发者如果需要跨平台支持该特性，需要依赖浏览器的功能检测，并使用额外的延迟加载库，例如laz yS izes和vanilla-lazyload。vanilla-lazyload库作者Andrea Verlicchi在一篇博文中介绍了混合延迟加载。Chrome团队工程经理Addy Osmani提供了一个示例：

<!-- 正常加载这个图片 -->
<img src="hero.jpg" alt=".."/>


<!-- 延迟加载其他图片 -->
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>


<script>
  if ('loading' in HTMLImageElement.prototype) {
      const images = document.querySelectorAll("img.lazyload");
      images.forEach(img => {
          img.src = img.dataset.src;
      });
  } else {
      // 动态引入LazySizes库
    let script = document.createElement("script");
    script.async = true;
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
    document.body.appendChild(script);
  }
</script>

如果需要尝试进行延迟加载，可以进入chrome://flags，开启允许iframe延迟加载（Enable lazy frame loading）和允许图片延迟加载（Enable lazy image loading）。这将会对标记了loading="lazy"的图片和iframe开启延迟加载特性，同时那些标记了loading="auto"或者没有任何loading属性的元素将适时进行延迟加载。

Google已经提议将img和iframe的loading属性作为HTML标准的一部分。

原文链接：

Chrome 74 Natively Supports Lazy Loading

创作场景

Chrome 74 发布：可开启原生延迟加载特性