如何在当今 Web 上使用标准的 HTML Video & Audio Lazy-Loading
HTML video and audio lazy loading is now a web standard and quickly gaining support in all major browsers. This feature was long overdue and, particularly given Squarespace’s role in proposing and implementing it, we’re very excited to see how developers use it on the web.
HTML 视频和音频懒加载现在已成为 web 标准，并迅速在所有主要浏览器中获得支持。这一功能早就该实现了，特别是鉴于Squarespace 在提出和实现它方面的作用，我们非常兴奋地看到开发者如何在 web 上使用它。
Figure 1 – An illustration of a web video player with a highlighted code overlay showing an HTML video element with lazy loading
图 1 – 一个网页视频播放器的插图，带有突出显示的代码覆盖层，显示带有 lazy loading 的 HTML video 元素
In this post, we’ll cover some best practices for using video and audio lazy loading in any website, as well as some gotchas to avoid. Let’s dive into how we can make use of audio and video lazy loading in websites today.
在本文中，我们将介绍在任何网站中使用视频和音频懒加载的一些最佳实践，以及一些需要避免的陷阱。让我们深入探讨如何在当今的网站中利用音频和视频懒加载。
This post is part 2 of a 2-part series. You can read about Squarespace’s journey to specify and implement this web standard in our first post, How We Brought HTML Video & Audio Lazy-Loading to Today’s Browsers.
这篇文章是 2 部分系列的第 2 部分。您可以在我们的第一篇文章中阅读 Squarespace 指定和实现这一 web 标准的历程，我们如何将 HTML 视频和音频懒加载带到当今的浏览器。
Same Attribute, New Elements
相同属性，新元素
Lazy loading is a pattern for delaying resources from downloading until they’re needed. In standard HTML, and <iframe> elements have supported lazy loading since 2019, and as of this year, you can use the same coding conventions for and elements as well. It all works by adding a
loading=”lazy” attribute.
懒加载是一种延迟资源下载直到需要时的模式。在标准 HTML 中， 和 <iframe> 元素自 2019 年起支持懒加载，并且从今年起，您也可以对 和 元素使用相同的编码约定。一切通过添加
loading="lazy" 属性实现。
First, let’s look at how it works with HTML video, as video has a few unique situations to cover – some of which won’t apply to audio. Here’s an example of a basic lazy-loading
首先，让我们看看它如何与 HTML video 一起工作，因为 video 有几个独特的情况需要涵盖 – 其中一些不适用于 audio。这里是一个基本的 lazy-loading
<video loading="lazy" src="path/to/sloth.webm" controls></video>
Here, we have a