Chrome 原生图片懒加载属性
Posted MIFE前端周刊
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Chrome 原生图片懒加载属性相关的知识,希望对你有一定的参考价值。
在这篇文章中,我们将研究新的load属性,它将原生的<img>和<iframe>延迟加载到web!对于好奇的人来说,下面是它的预览版:
<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
我们希望在Chrome 75中提供对加载的支持,并且正在深入研究我们即将发布的特性。在此之前,让我们深入了解加载是如何工作的。
简介
Web页面通常包含大量图像,这将导致数据使用、页面膨胀和页面加载速度。其中许多图片都是屏幕外的,需要用户滚动才能看到。
从历史上看,为了限制屏幕外的图像对页面加载时间的影响,开发人员需要使用javascript库(比如lazysize)来延迟获取这些图像,直到用户在它们附近滚动。
加载211个图像的页面。没有延迟加载的版本可以获取10MB的图像数据。延迟加载版本(使用lazysize)只预先加载250KB——当用户滚动体验时,会获取其他图像。见WPT。
如果浏览器可以避免为您加载这些屏幕外的图像呢?这将有助于更快地加载视图端口中的内容,减少总体网络数据使用,并在低端设备上减少内存使用。好吧,我很高兴与大家分享,这将很快与新的加载属性为图像和iframe。
loading attribute
加载属性允许浏览器延迟加载屏幕外图像和iframe,直到用户在它们附近滚动。加载支持三个值:
lazy:是延迟加载的一个很好的候选项。
eager:不适合延迟加载。马上加载。
自动:浏览器将决定是否延迟加载。
完全不指定属性将与设置load =auto具有相同的影响。
例子
该loading属性适用于<img>(包括srcset和<picture>)以及<iframe>:
<!-- 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>
“当用户在附近滚动时”的确切试探由浏览器决定。一般来说,我们希望浏览器能够在延迟图像和iframe内容进入viewport之前获取它们。这将增加在用户滚动到图像或iframe时完成的加载更改。
注意:我建议将其命名为loading属性,因为它的命名与解码属性更接近。之前的建议,比如lazyload属性没有实现,因为我们需要支持多个值(lazy、eager和auto)。
特性检测
我们一直在考虑能够为延迟加载提取和应用JavaScript库的重要性(对于跨浏览器支持)。支持loading
功能可以如下检测:
<script>
if ('loading' in HTMLImageElement.prototype) {
// Browser supports `loading`..
} else {
// Fetch and apply a polyfill/JavaScript library
// for lazy-loading instead.
}
</script>
注意:您还可以使用loading
渐进增强功能。支持该属性的浏览器可以获得新的延迟加载行为,loading=lazy
而不支持该属性的浏览器仍然会加载图像。
跨浏览器图片延迟加载
如果对延迟加载图像的跨浏览器支持很重要,那么如果您<img src=unicorn.jpg loading=lazy />
在标记中使用,则仅对功能检测和延迟加载库是不够的。
如果对延迟加载图像的跨浏览器支持很重要,那么如果您<img src=unicorn.jpg loading=lazy />
在标记中使用,则仅对功能检测和延迟加载库是不够的。
下面是一个例子。
视口内/上方图像是常规
<img>
标签。data-src
会破坏预加载扫描程序,因此我们希望避免它出现在视口中的所有内容。我们对图像使用data-src,以避免在不受支持的浏览器中出现急于加载的情况。如果支持加载,我们将data-src替换为src。
如果
loading
不受支持,我们加载一个后备(LazySizes)并启动它。在这里,我们使用class=lazyload
一种方式向LazySizes图像指示我们想要延迟加载。
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt=".."/>
<!-- Let's lazy-load the rest of these images -->
<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>
(async () => {
const images = document.querySelectorAll("img.lazyload");
if ('loading' in HTMLImageElement.prototype) {
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const lazySizesLib = await import('/lazysizes.min.js');
// Initiate LazySizes (reads data-src & class=lazyload)
lazySizes.init(); // lazySizes works off a global.
}
})();
</script>
其他
立即尝试:转到chrome:// flags并打开“启用延迟帧加载”和“启用延迟图像加载”标志,然后重新启动Chrome。我们将在未来几周内将实现从旧的属性名称load更新为loading。
DevTools:
在
Chrome中的一个实现细节是它在页面加载时获取前2KB的图像。当用户即将看到它时,它将获取图像的其余部分。这可能导致(1)在DevTools网络面板中出现两次(2)资源计时对每个图像有2个请求。客户端提示:如果此检查可以作为HTTP请求标头完成,则可能会感兴趣,而不是等待客户端功能检测完成。客户端提示正在考虑中,尚未成熟。
原文连接:https://addyosmani.com/blog/lazy-loading/
以上是关于Chrome 原生图片懒加载属性的主要内容,如果未能解决你的问题,请参考以下文章