图片延迟加载

延迟加载 是一种用于将资源的加载推迟到需要时才加载的技术。对于图像，这意味着直到用户滚动到图像在屏幕上可见的位置时才会下载图像。这是加快网站速度的好方法，因为您只下载用户实际看到的图像。这对于包含大量图像的站点特别有用，因为您可以通过仅下载用户实际看到的图像来节省大量带宽。

实现延迟加载

延迟加载相对比较简单，只要在图片中加入 loading 属性并且设置为 lazy 就可以实现延迟加载。但是需要注意的是延迟加载跟容器的限定高度有关，即浏览器首先会加载容器限定高度中的图片，当浏览器向下滚动时才会加载后续的图片，具体的实例如下：

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .img_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 400px;
    overflow-x: scroll;
  }

  .img_box img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
  }
</style>

<div class="img_box">
  <img src="./images/max-1.jpg" loading="lazy" />
  <img src="./images/max-2.jpg" loading="lazy" />
  <img src="./images/max-3.jpg" loading="lazy" />
  <img src="./images/max-4.jpg" loading="lazy" />
  <img src="./images/max-5.jpg" loading="lazy" />
  <img src="./images/max-6.jpg" loading="lazy" />
  <img src="./images/max-7.jpg" loading="lazy" />
  <img src="./images/max-8.jpg" loading="lazy" />
  <img src="./images/max-9.jpg" loading="lazy" />
  <img src="./images/max-10.jpg" loading="lazy" />
  <img src="./images/max-11.jpg" loading="lazy" />
  <img src="./images/max-12.jpg" loading="lazy" />
  <img src="./images/max-13.jpg" loading="lazy" />
  <img src="./images/max-14.jpg" loading="lazy" />
  <img src="./images/max-15.jpg" loading="lazy" />
  <img src="./images/max-16.jpg" loading="lazy" />
  <img src="./images/max-17.jpg" loading="lazy" />
  <img src="./images/max-18.jpg" loading="lazy" />
  <img src="./images/max-19.jpg" loading="lazy" />
  <img src="./images/max-20.jpg" loading="lazy" />
  <img src="./images/max-21.jpg" loading="lazy" />
  <img src="./images/max-22.jpg" loading="lazy" />
</div>

高级延迟加载

当使用上述方式进行图片延迟加载后，假如页面的网速比较慢的时候，页面还是会出现大片的空白区域，这样就会给用户带来不好的印象，所以我们可以在图片的外层包裹一个 div 元素，而 div 元素中加载一个 20 像素大小的图片，这样就不会产生页面大量空白区。具体实例如下：

<style>
  .blurred-img {
    background-repeat: no-repeat;
  }

  .small-img-1 {
    background-image: url(imageName-small.jpg);
    background-size: cover;
  }
</style>

<div class="blurred-img small-img-1">
  <img src="./images/max-1.jpg" loading="lazy" />
</div>

提升延迟效果

在上述例子中，我们为图片添加了一个小图片来解决页面空白的问题，但是整体的效果还不是很好，所以我们可以为容器添加一些动画效果来提升交互效果。具体实例代码片段如下：

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

  .blurred-img img {
    opacity: 0;
  }

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

  .blurred-img.loaded {
    background-image: none;
    filter: none;
  }

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

<script>
  const blurredImageDiv = document.querySelectorAll(".blurred-img");

  blurredImageDiv.forEach((div) => {
    const img = div.querySelector("img");

    function loaded() {
      div.classList.add("loaded");
    }

    if (img.complete) {
      loaded();
    } else {
      img.addEventListener("load", loaded);
    }
  });
</script>