页面加载占位_JavaScript图片和视频的懒加载

在网站典型负载中，图像和视频是非常重要的一部分内容。 不过遗憾的是，项目干系人并不愿意从其现有应用中删除任何媒体资源。 这种僵局不免令人沮丧，尤其是当所有相关方都希望改善网站性能，但却无法就具体方法达成一致时。 幸运的是，延迟加载解决方案可以减少初始页面负载_和_加载时间，但不会删减任何内容。

什么是延迟加载？

延迟加载是一种在加载页面时，延迟加载非关键资源的方法， 而这些非关键资源则在需要时才进行加载。 就图像而言，“非关键”通常是指“屏幕外”。 如果您曾使用过 Lighthouse 并检验过其提供的改进机会，就有可能从 屏幕外图像审核中看到一些这方面的指导：

您可能已经见过延迟加载的实际应用，其过程大致如下：

• 您访问一个页面，并开始滚动阅读内容。
• 在某个时刻，您将占位符图像滚动到视口中。
• 该占位符图像瞬间替换为最终图像。

您可以在热门发布平台 Medium 上找到图像延迟加载的示例。该平台在加载页面时会先加载轻量级的占位符图像，并在其滚动到视口时，将之替换为延迟加载的图像。

图像延迟加载实际应用示例。 占位符图像在页面加载时加载(左侧)，当滚动到视口时，最终图像随即加载(即在需要时加载)。

为何要延迟加载图像或视频，而不是直接_加载_？

因为直接加载可能会加载用户永远不会查看的内容， 进而导致一些问题：

• 浪费数据流量。 如果使用无限流量网络，这可能还不是最坏的情况(不过，这些宝贵的带宽原本可以用来下载用户确实会查看的其他资源)。 但如果流量有限，加载用户永远不会查看的内容实际上是在浪费用户的金钱。
• 浪费处理时间、电池电量和其他系统资源。 下载媒体资源后，浏览器必须将其解码，并在视口中渲染其内容。
• 延迟加载图像和视频时，可以减少初始页面加载时间、初始页面负载以及系统资源使用量，所有这一切都会对性能产生积极影响。 在本指南中，我们将针对延迟加载图像和视频提供一些技巧及指导，并列举几个常用的库。

延迟加载图像

内联图像

元素中使用的图像是最常见的延迟加载对象。 延迟加载 元素时，我们使用 JavaScript 来检查其是否在视口中。 如果元素在视口中，则其 src(有时是 srcset)属性中就会填充所需图像内容的网址。

使用 Intersection Observer

如果您曾经编写过延迟加载代码，您可能是使用 scroll 或 resize 等事件处理程序来完成任务。 虽然这种方法在各浏览器之间的兼容性最好，但是现代浏览器支持通过 Intersection Observer API 来检查元素的可见性，这种方式的性能和效率更好。

注：并非所有浏览器都支持 Intersection Observer。 如果浏览器之间的兼容性至关重要，请务必阅读下一节，其中会说明如何使用性能稍差(但兼容性更好！)的 scroll 和 resize 事件处理程序来延迟加载图像。

与依赖于各种事件处理程序的代码相比，Intersection Observer 更容易使用和阅读。这是因为开发者只需要注册一个 Observer 即可监视元素，而无需编写冗长的元素可见性检测代码。 然后，开发者只需要决定元素可见时需要做什么即可。 假设我们的延迟加载

元素采用以下基本标记模式：

在此标记中，我们应关注三个相关部分：

• class 属性，这是我们在 JavaScript 中选择元素时要使用的类选择器。
• src 属性，引用页面最初加载时显示的占位符图像。
• data-src 和 data-srcset 属性，属于占位符属性，其中包含元素进入视口后要加载的图像的网址。

现在，我们来看看如何在 JavaScript 中使用 Intersection Observer，并通过以下标记模式延迟加载图像：

document.addEventListener("DOMContentLoaded