图片懒加载

图片懒加载

图片懒加载是一种简单的方法，可以显着提高网站的加载速度。图片懒加载的基本实现只需要添加一行代码。但是，有更先进的技术可以增强延迟加载体验。这些技术允许我们显示模糊的占位符并实现从占位符图像到完整图像的平滑过渡。在本文中，将解释我们需要了解的有关图片懒加载的所有信息，并指导如何创建这种高级图片懒加载效果。

从这种状态开始加载：

最终呈现出：

什么是图片懒加载

懒加载是一种延迟加载某些资源（例如图像）的技术，直到网页上实际需要它们为止。具体来说，当涉及到图像时，懒加载可确保在用户滚动到图像在屏幕上可见的位置之前不会下载图像。这种方法在网站性能方面提供了显着的好处，因为我们只需下载用户实际看到的图像。

懒加载对于包含大量图像的网站特别有价值，因为它允许我们避免不必要地下载不立即可见的图像，从而节省带宽。即使我们拥有快速的互联网连接或通常浏览具有小且优化图像的网站，也可能无法完全理解懒加载的优势。然而，对于许多用户尤其是那些互联网连接速度较慢的用户，懒加载的优势非常明显。图像通常是用户必须下载的最大资源，因此即使连接速度很快，懒加载也可以在减少网站的整体加载时间方面产生重大影响。

简单的图片懒加载

如前所述，实现图像延迟加载非常简单。它涉及向图像标签添加单个属性。通过将loading属性设置为lazy，我们就可以为该特定图像启用延迟加载。然后，浏览器根据图像与屏幕可见部分的接近程度来确定下载图像的最佳时间。

<img src="image.jpg" loading="lazy" />

这种基本延迟加载的最大缺点是，在下载图像之前，用户将看到图像应在的空白区域。

前面描述的基本懒加载技术可能会导致用户体验不佳，因为用户会在图像完全下载之前看到图像应在的空白区域。为了增强用户体验，本文的其余部分将解释如何利用延迟加载来显示模糊的占位符图像，直到下载完整图像。这种方法可确保用户在加载图像时获得图像的视觉呈现，从而带来更具吸引力和无缝的体验。

高级懒加载

使用模糊占位符图像

要生成模糊的占位符图像，我们可以创建原始图像的低分辨率版本。有多种方法可以实现这一点。例如，可以利用 BlurHash 等服务，使用 Figma 等设计工具手动调整图像大小，或使用 ffmpeg 等自动化工具。在本文中，我们将使用 ffmpeg，因为它提供灵活性和轻松的自动化。要生成占位符图像，可以在命令行中执行以下代码，确保位于图像所在的目录中：

ffmpeg -i imageName.jpg -vf scale=20:-1 imageName-small.jpg

在该命令中，imageName.jpg表示原始图像文件的名称，imageName-small.jpg表示生成的占位符图像文件的名称。scale=20:-1参数指定占位符图像的宽度应为 20 像素，同时保持原始图像的纵横比。我们可以根据自己的喜好调整宽度，但一般来说，20 像素的宽度适用于大多数图像，并且即使在较慢的互联网连接上也能确保近乎即时加载。使用此方法创建的占位符图像的大小通常小于 1kB。

生成小占位符图像后，下一步是创建一个

元素并将其背景图像设置为之前生成的超小图像。这个

元素将用作显示的占位符图像，直到下载完整图像。这是一个示例代码片段：

<div class="blurred-img">div>

在 CSS 中，可以定义类.blurred-img的样式来设置背景图像、调整其外观并确保正确显示：

.blurred-img {
  background-image: url(imageName-small.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

在此代码中，imageName-small.jpg指的是使用 ffmpeg 或任何其他方法生成的小占位符图像的文件名。background-repeat: no-repeat;属性可以防止图像重复，同时background-size: cover;确保它覆盖整个

元素。

为了确保模糊的占位符图像大小正确，我们可以在

标签中添加一个元素.。默认情况下，我们将的不透明度设置为 0 以隐藏它，直到加载完整图像。

<div class="blurred-img">
  <img src="imageName.jpg" loading="lazy" />
div>

在 CSS 中，可以添加以下样式规则将其不透明度设置为0 来隐藏：

.blurred-img img {
  opacity: 0;
}

由于浏览器会放大超小图像，因此会自动实现模糊效果。如果想要更多模糊，可以使用 CSSfilter属性实现模糊滤镜。然而，在这种情况下可能不需要额外的模糊。

.blurred-img {
  filter: blur(10px);
}

为了进一步增强加载效果，可以向占位符图像添加动画。这将使图像正在加载时更加明显。

.blurred-img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pulse 2.5s infinite;
  background-color: white;
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

通过添加上述 CSS 代码，动画将应用于占位符图像，使其具有淡入和淡出效果。

要实现加载淡入完整图像，我们需要添加一些 JavaScript 代码来处理图像加载事件。下面是代码分解：

<div class="blurred-img">
  <img src="imageName.jpg" loading="lazy" />
div>

const blurredImageDiv = document.querySelector(".blurred-image");
const img = blurredImageDiv.querySelector("img");
function loaded() {
  blurredImageDiv.classList.add("loaded");
}
if (img.complete) {
  loaded();
} else {
  img.addEventListener("load", loaded);
}

在上面的代码中，我们选择.blurred-img 及其中的元素。通过complete图像的属性以确定它是否已被加载。如果已加载，我们直接调用loaded()函数。否则，我们将事件侦听器load添加到图像的事件中，该事件将在图像加载后触发。加载图像时，会调用该函数。

.blurred-img {
  background-repeat: no-repeat;
  background-size: cover;
}

.blurred-img::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: pulse 2.5s infinite;
  background-color: var(--text-color);
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

.blurred-img.loaded::before {
  animation: none;
  content: none;
}

.blurred-img img {
  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.blurred-img.loaded img {
  opacity: 1;
}

在上面的代码中，我们做了一些更改。加载图像时（.blurred-img::before），我们从元素中删除动画和内容，从而停止动画。我们还向元素添加了一个过渡属性，它会平滑地淡入。最后，我们将不透明度设置为 ·1·，使其在加载时可见。

通过实施这些更改，最终结果将是模糊的占位符图像，加载后会在完整图像中淡出。我们可以在开发者工具中调整网络速度以查看加载动画的效果。