图片懒加载

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

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

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

.blurred-img img {
  opacity: 0;
}
1
2
3

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

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

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

.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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

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

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);
}
1
2
3
4
5
6
7
8
9
10

在上面的代码中，我们选择.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

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