自定义网站延迟加载的最佳方法

已发表: 2019-07-29

延迟加载用于延迟某些图像或网页元素的加载，以供用户访问网页时使用。 这通常用于首屏下方的图像和网站元素。 这个想法是，不是一次性加载整个网页，而是在用户不断向下滚动时加载网页的某些部分。

目录隐藏
<img> 标签属性：
1. 使用 JavaScript 事件：
2.使用路口观察者API：
CSS背景属性：

使用延迟加载的主要好处是它减少了整个网站的加载时间。 延迟加载通过首先加载访问者可以立即开始观看或阅读的顶部来提高网站的性能并提供更好的用户体验。 当访问者来到您的网页并且必须等待很长时间时，他们就会失去兴趣并且可能会离开。 但是，如果您在加载网页的其余部分时立即给他们一些观看或阅读的内容，您可以让他们与您的网站保持联系。 延迟加载的第二个优点是降低成本。 仅当网站访问者访问网站的特定部分时，才会下载图像。 因此，如果访问者不向下滚动，他们的设备上下载的数据就会减少，从而节省资金。

由于这些优势，延迟加载是改善网站用户体验和效率的绝佳方式。

您可以通过两种方式为您的网站自定义延迟加载——使用 CSS 背景属性或使用 <img> 标签。 然而，<img> 标记方法在这两种方法中更为常见，因为这种技术易于使用。

<img> 标签属性：

为网站自定义延迟加载的最佳方法 - 图像标签 别针

当使用 <img> 标签时，浏览器使用 src 属性来触发图像加载。 它是代码中的第 1 个图像还是第 100 个图像都没有关系。 如果浏览器接收到 src 属性，就会触发图片加载。 因此，要延迟加载这些图像，请将图像 URL 添加到 src 以外的属性中。 例如，如果将图像 URL 放在 data-src 属性中，则浏览器不会触发图像加载，因为 src 属性为空。

现在预先加载已经停止，我们需要告诉浏览器何时应该加载图像。 我们希望在图像进入视口后立即触发图像的加载。 有两种方法可以检查图像进入视口的时间：

1. 使用 JavaScript 事件：

为网站自定义延迟加载的最佳方法 - Javascript 别针

在这种技术中，事件侦听器用于浏览器中的大小调整、方向更改和滚动事件。 滚动事件是最明显的事件。 它用于检查用户何时滚动网页。 'orientationChange' 和 'resize' 事件对于延迟加载同样重要。 当浏览器窗口的大小发生变化时，将触发 resize 事件。 'orientationChange' 事件在设备从纵向模式旋转到横向模式时发生，反之亦然。 在这些情况下，屏幕上可见的图像数量会发生变化，因此我们需要触发图像加载。

当这些事件之一发生时，我们会查找页面上尚未加载的所有图像。 通过检查当前在视口中的网页上所有未加载的图像，我们找出需要立即加载的图像。 这是使用当前文档滚动顶部、窗口高度和图像的顶部偏移量来完成的。

如果图像已进入视口，我们从 data-src 属性中获取图像 URL，并将其放在触发图像加载的 src 属性中。 然后我们必须从图像中删除惰性类，因为这个类会使图像延迟加载。 加载所有图像后，将删除事件侦听器。

在滚动的情况下，滚动事件连续触发。 因此，为了提高性能，我们可以添加一个小的超时来限制延迟加载的执行。

2.使用路口观察者API：

为网站自定义延迟加载的最佳方式 - Intersection Observer 别针

Intersection Observer API 是浏览器中相对较新的 API。 这种技术使得检测元素进入视口的时间变得非常简单。 与以前的方法相比，这种技术无需使用复杂的数学即可提供出色的性能。

首先，我们必须将观察者附加到所有需要延迟加载的图像上。 当 API 检测到图像进入视口时，它会从 data-src 中选择 URL，并使用 'isIntersecting' 方法将其放入 src 属性中以触发图像加载。 之后，惰性类与观察者一起被移除。

与使用 JavaScript 事件相比，Intersection Observer API 运行迅速，不会使网站在滚动时显得迟缓。 使用事件侦听器技术，我们必须添加一个超时，这会增加一点延迟。 但是，并非所有浏览器都支持 Intersection Observer API。 因此，事件监听器已成为用户的流行选择。

CSS背景属性：

为网站自定义延迟加载的最佳方法 - CSS 背景 别针

为了加载 CSS 背景图像，浏览器必须构建 CSS 对象模型 (CSSOM) 以及文档对象模型 (DOM) 来决定 CSS 样式是否将应用于现有文档中存在的 DOM。 如果 CSS 规则不适用于元素，浏览器将不会加载背景图像。

使用这种技术，当元素进入视口时，我们会应用 background-image CSS 属性。 CSS中有一个ID为bg-image（背景图片）的元素。 一旦将惰性类添加到图像中，在 CSS 技术中，我们会覆盖 bg-image 属性并将其设为无。

在 CSS 中将 .lazy 类添加到 #bg-image 比单独使用 #bg-image 更受欢迎。 最初，浏览器将 background-image: none 应用于元素。 一旦我们滚动浏览网页，事件侦听器或 Intersection Observer 就会检测到视口中存在的图像并删除 .lazy 类。 这不适用于 CSS 技术，因为 bg-image 属性应用于触发背景图像加载的元素。

因此，这里有两种方法可以自定义您自己的延迟加载网站。 这两种技术都提供了卓越的结果。 然而，如果你想要一个简单的技术，你应该选择 <img> 标签。 有很多插件可供 WordPress 用户在他们的 WordPress 网站上自定义延迟加载图像。 使用这些插件为您的 WordPress 网站优化图像以及延迟加载将提高您网站的性能，提供更好的体验并帮助 SEO。