开篇
懒加载图片是加快网站加载速度最简单的方法之一，因为最基本的懒加载只需要一行代码。然而，你还可以使用一些高级技巧，使你的懒加载效果看起来像上面的图片一样，具有模糊的占位符和从占位符到完整图片的平滑过渡效果。在本文中，我将介绍关于懒加载的一切知识，以及如何创建这种高级懒加载效果。


什么是懒加载？
懒加载是一种延迟加载资源的技术。在图片的情况下，这意味着直到用户滚动到屏幕上可见图片的位置，该图片才会被下载。这是一种加快网站速度的好方法，因为你只会下载用户实际可见的图片。对于包含大量图片的网站尤其有用，因为你只下载用户实际可见的图片，从而可以节省大量带宽。

如果你的网络速度很快，或者你只访问加载速度很快、图片优化得很好的网站，你可能看不出懒加载图片的优势，因为你几乎可以立即下载所有图片。但对其他人来说，懒加载图片是一个革命性的改变。这并不仅仅适用于网络连接非常慢的用户。图片是用户下载的最大资产之一，即使他们的网络连接很快，懒加载图片仍然可以极大地提高网站的加载时间。

基本的懒加载
正如我在本文开头提到的，懒加载图片就像在图像标签中添加一个属性那样简单。可以将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 的背景图像设置为我们的超小图像。这将是在完整图像下载之前显示的占位符图像。我们的代码将类似于下面这样：

<!-- 堆代码 duidaima.com -->
<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，这样在图像加载完成后它将可见。

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

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