懒加载图片是提高网站加载速度的最简单方法之一，仅需一行代码即可实现。然而，通过运用一些高级技巧，您可以进一步提升懒加载效果，使其看起来如上图所示，具有模糊的占位符以及从占位符到完整图片的平滑过渡。在本文中，我们将深入探讨懒加载的各个方面，并介绍如何创建这种高级懒加载效果。

什么是懒加载？

懒加载是一种延迟加载资源的技术，用于提高网站性能和用户体验。在图片的情况下，只有当用户滚动到图片在屏幕上可见的位置时，图片才会被下载。这种技术可以显著加快网站加载速度，因为只下载用户实际可见的图片，从而节省大量带宽。

对于包含大量图片的网站尤其有用，因为只下载用户实际可见的图片可以减少加载时间和带宽消耗。然而，对于网络速度很快或访问加载速度很快、图片优化得很好的网站的用户，可能无法看出懒加载图片的优势，因为他们可以几乎立即下载所有图片。

懒加载图片不仅可以提高网站加载速度，还可以减少用户等待时间，提高用户体验。图片是用户下载的最大资产之一，即使他们的网络连接很快，懒加载图片仍然可以极大地提高网站的加载时间，减少用户等待时间。

懒加载图片适用于各种网络环境和设备，无论网络连接速度快慢，都可以提高网站性能和用户体验。因此，对于追求卓越性能和用户体验的网站来说，懒加载图片是一种值得考虑的优化技术。

基本的懒加载

正如我在本文开头所提到的，懒加载图片非常简单，只需在图像标签中添加一个属性。可以将loading属性设置为lazy，以启用图像的懒加载。浏览器会自动根据图像离屏幕的距离来确定何时下载图像，从而加快页面加载速度，减少用户等待时间。

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

本页面上的所有图片都采用了懒加载技术，因此当你向下滚动页面时，你会发现这些图片直到接近屏幕时才开始加载。你可以通过检查网络选项卡并将其筛选为仅显示图片请求来轻松观察到这一点。

当你查看网络选项卡时，你可能会注意到每个图片都附带了一个随机的ID。我这样做的原因是，如果你在页面上多次加载相同的图片，浏览器只会下载一次，并缓存该图片，以便在相同页面或不同页面中重复使用该图片时，浏览器可以直接从缓存中加载，而不需要再次下载。因此，为每个图片添加了一个唯一的ID，以便浏览器认为它们是不同的图片，并单独下载它们，这样你就可以在开发工具中看到懒加载的效果。

这种基本的懒加载的最大缺点是，在图像下载之前，用户将看到图像应该出现的空白空间。它的外观可能类似于下面的图片：

这并不是理想的用户体验，因为当图片在屏幕上滚动时，用户可能会看到一个模糊的图像，直到完整的图像下载完成。为了改善这种情况，本文将向您展示如何利用懒加载来显示一个模糊的占位符图像，直到完整的图像下载完成。

高级懒加载

在查看开发工具时，你可能会注意到有一堆非常小的图片被下载了。这些是显示在完整图像下载之前的模糊占位符图像，这是创建这种高级懒加载效果的第一步。

要创建一个模糊的占位符图像，你只需要生成一个超低分辨率版本的图像。有很多方法可以做到这一点，比如使用像 BlurHash 这样的服务、在 Figma 这样的工具中手动调整图像大小，或者使用像 ffmpeg 这样的工具进行自动处理。在本文中，我将使用 ffmpeg 生成占位符图像，因为它是最灵活的选项，并且可以轻松自动化。我只需要在包含要生成占位符图像的图像的目录中，在命令行中运行下面的代码：

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

这样生成的占位符图像宽度为20个像素，高度将根据原始图像的宽高比自动计算。你可以根据需要更改宽度，但我发现20个像素对于大多数图像效果良好，并且足够小，即使在较慢的网络连接下也能几乎立即加载。我的占位符图像每个都不到1KB。

下一步是创建一个 div，并将该 div 的背景图像设置为我们的超小图像。这将是在完整图像下载之前显示的占位符图像。我们的代码将类似于下面这样：

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

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

很可能你的图片不会像我所描述的那么大，因为"blurred-img" div 的大小是根据其中的内容来确定的。不过，我们可以通过将 img 添加到 div 中，并确保默认情况下隐藏它，以确保我们不会在图像加载过程中看到它的一半。我们可以轻松解决这个问题。

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

.blurred-img img {
  opacity: 0;
}

这将给我们带来我们期望的效果。我们之所以自动获得模糊效果，是因为浏览器会自动将超小图像进行缩放。如果你想要增加更多的模糊效果，你可以使用 CSS 的 filter 属性，在 "blurred-img" div 上添加模糊滤镜。不过，个人而言，我认为这并不是必需的。

.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;
  }
}

现在，我们只需在完整图像加载完成后淡入图像即可。与我们之前编写的代码相比，这部分略微复杂一些，因为它需要使用 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 {
  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;
}

这是一段较长的代码，所以我将逐步解释。在 JavaScript 代码中，我们首先选择了 "blurred-img" div，然后选择了该 div 内的 img 元素。接着，我们检查 img 元素的 complete 属性，以确定它是否已经加载完成。如果返回值为 true，则表示图像已加载完成，我们只需调用 loaded 函数即可。但如果返回值为 false，则需要为 img 元素添加一个事件监听器，该监听器在图像加载完成时触发，并调用 loaded 函数。loaded 函数只是将 loaded 类添加到 "blurred-img" div 上。

在 CSS 代码中，我们对代码进行了一些更改。首先，我们从 "blurred-img::before" 元素中移除了动画/内容，这将在图像加载完成后停止动画。我们还为 img 元素添加了一个过渡效果，这样当 loaded 类被添加到 "blurred-img" div 上时，图像将渐渐淡入。最后，我们将 img 元素的不透明度设置为 1，这样在图像加载完成后它将可见。

通过进行上述操作，将得到以下效果：加载模糊的占位符图像，直到完整图像加载完成后淡入显示。你可以在开发工具中调整网络速度，观察加载动画的效果。

结束

懒加载图片是一种简单的技术，可以改善网站的用户体验。最简单的懒加载只需要一行代码，但可以通过添加一些额外的代码实现更多有趣的加载技巧。