在这篇文章中，我们将看看为网络loading带来原生<img>和<iframe>懒惰加载的新属性。对于好奇的人来说，这里有一个实际的预览：
<img src="celebration.jpg" alt="…" />
<iframe src="video-player.html" width="300" height="150"></iframe>
我们希望能够loading在chrome 75中提供支持，并正在深入研究我们即将发布的功能。在那之前，让我们深入了解它的loading工作原理。
介绍网页通常包含大量图像，这些图像会导致数据使用，页面膨胀以及页面加载的速度。许多这些图像都在屏幕外，需要用户滚动才能查看它们。
从历史上看，为了限制屏幕外图像对页面加载时间的影响，开发人员需要使用javascript库（如lazysizes）来推迟获取这些图像，直到用户滚动它们为止。
页面加载211图像。没有延迟加载的版本可以获取10mb的图像数据。延迟加载版本（使用lazysizes）预先加载250kb – 当用户滚动体验时，将获取其他图像。见wpt。
如果浏览器可以避免为您加载这些屏幕外图像怎么办？这将有助于更快地加载视图端口中的内容，减少整体网络数据使用和低端设备，减少内存使用。嗯，我很高兴地分享，很快就可以使用loading图片和iframe?的新属性。
该loading属性该loading属性允许浏览器推迟加载屏幕外图像和iframe，直到用户在它们附近滚动。loading支持三个值：
lazy：是一个很好的懒人加载候选人。eager：不适合延迟加载。马上加载。auto：浏览器将确定是否延迟加载。根本不指定属性将产生与设置相同的影响loading=auto。
例子该loading属性适用于<img>（包括with?srcset和inside?<picture>）以及on?<iframe>：
<!– lazy-load an offscreen image when the user scrolls near it –>
<img src="unicorn.jpg" alt=".." />
<!– load an image right away instead of lazy-loading –>
<img src="unicorn.jpg" alt=".." />
<!– browser decides whether or not to lazy-load the image –>
<img src="unicorn.jpg" alt=".." />
<!– lazy-load images in <picture>. <img /> is the one driving image
loading so <picture> and srcset fall off of that –>
</picture><picture> <source srcset="big.jpg 1x, big-hd.jpg 2x" media="(min-width: 40em)" /></picture>
<picture> <source srcset="small.jpg 1x, small-hd.jpg 2x" /></picture>
<picture> <img src="fallback.jpg" /></picture>
<!– lazy-load an image that has srcset specified –>
<img src="small.jpg" sizes="(min-width: 36em) 33.3vw, 100vw" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" alt="a rad wolf" />
<!– lazy-load an offscreen iframe when the user scrolls near it –>
<iframe src="video-player.html" width="300" height="150"></iframe>
“当用户滚动到附近时”的确切启发式方法留给浏览器。一般来说，我们希望浏览器在进入视口之前会开始提取延迟图像和iframe内容。这将增加图像或iframe在用户滚动到它们时完成加载的更改。
注意：我建议我们将该loading属性命名为，因为它的命名与decoding属性更接近。之前的提议，例如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 data-src=unicorn.jpg />（而不是src，srcset或<source>），以避免触发浏览器中的贪婪加载不支持新的属性。如果loading支持，可以使用javascript将这些属性更改为正确的属性，否则加载库。
下面是一个这样的例子。
视口内/上方图像是常规<img>标签。a?data-src会破坏预加载扫描程序，因此我们希望避免它出现在视口中的所有内容。我们data-src在图像上使用以避免在不受支持的浏览器中产生急切的负载。如果loading支持，我们换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 {
// dynamica