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

阅读数:6562 2019 年 7 月 18 日 08:00

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

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

收藏

评论

微博

用户头像
发表评论

注册/登录 InfoQ 发表评论