为网站自定义自己的延迟加载的最佳方法_极简慕枫

延迟加载用于推迟加载某些图像或网页元素，以便以后在用户访问网页时使用。这通常是针对图像和网站元素进行的。我们的想法是，不是一次性加载整个网页，而是在用户不断向下滚动时加载网页的某些部分。

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

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

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

<img>标签属性：

使用<img>标记时，浏览器使用src属性来触发图像加载。它是代码中的第一张图像还是第100张图像无关紧要。如果浏览器收到src属性，它将触发图像加载。因此，要延迟加载这些图像，请将图像URL添加到src以外的属性。例如，如果将图像URL放在data-src属性中，则浏览器不会触发图像加载，因为src属性为空。

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

1.使用JavaScript事件：

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

当其中一个事件发生时，我们会查找页面上尚未加载的所有图像。通过检查现在在视口中的网页上存在的所有已卸载图像，我们可以找到需要立即加载的图像。这是使用当前文档滚动顶部，窗口高度和图像的顶部偏移完成的。

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

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

2.使用交叉观察者API：

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

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

与使用JavaScript事件相比，Intersection Observer API可以快速工作，而不会使网站在滚动时显得迟钝。使用事件监听器技术，我们不得不添加一个稍微延迟的超时。但是，并非所有浏览器都支持Intersection Observer API。因此，事件监听器已成为用户的热门选择。

CSS背景属性：

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

使用此技术，我们在元素到达视口时应用背景图像CSS属性。CSS中有一个带有ID bg-image（背景图像）的元素。将类惰性添加到图像后，在CSS技术中，我们覆盖bg-image属性并使其为none。

在CSS中将.lazy类添加到＃bg-image是首选，而不是单独使用＃bg-image。最初，浏览器将background-image：none应用于元素。滚动浏览网页后，事件侦听器或交叉观察器会检测视口中存在的图像并删除.lazy类。这不适用于CSS技术，因为bg-image属性应用于触发背景图像加载的元素。

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

武汉做网站