博主彼岸临窗的博客主题做得非常简约漂亮，虽然生活类文章更新不多，但我有时候总喜欢光顾它，不为别的，享受这个体验的过程。

博主也很热心，还免费共享了主题代码，于是，我也就借用了不少资源过来，比如回复 emoji 表情，这里要说的是懒加载图片，真的体验感极强，借花献佛也分享出来吧。

一、添加懒加载图片标签

懒加载图片是作为标签背景，通过处理 .lazy-load 和 .loaded 类以及 data-src 属性来实现。其中 .loaded 是加载完成后通过 js 添加的。

<div class="lazy-load " data-src="/webpath/to/img">
</div>

二、添加 lazy-load 样式

主要是指定背景图片cover属性，以及加载过程中的模糊渐变动态处理

/* 懒加载样式 */
.lazy-load {
  /*  默认背景图 */
  /* background-image: url(./images/bgdemo/ad_2.jpg); */
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: .5s ease-in-out opacity;
  -webkit-transition: .5s ease-in-out opacity;
  filter: blur(35px);
  mask: radial-gradient(circle at center, white 100%, transparent 100%);
  -webkit-mask: radial-gradient(circle at center, white 100%, transparent 100%);
}

.loaded {
  filter: blur(0px);
  opacity: 1;
  transition: .5s filter linear, .5s -webkit-filter linear;
}
/* 懒加载结束 */

三、添加懒加载 js 函数

// 懒加载逻辑
function initLazyLoad() {
  const lazyImages = document.querySelectorAll(".lazy-load:not(.loaded)");
  const lazyLoad = (target) => {
    const io = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const img = entry.target;
            const src = img.getAttribute("data-src");

            if (src) {
              const tempImg = new Image();
              tempImg.src = src;
              tempImg.onload = () => {
                img.style.backgroundImage = `url('${src}')`;
                img.classList.add("loaded");
                observer.unobserve(img);
              };
              tempImg.onerror = () => {
                console.error("图片加载失败:", src);
              };
            }
          }
        });
      },
      {
        rootMargin: "0px",
        threshold: 0.1,
      }
    );

    io.observe(target);
  };
  lazyImages.forEach(lazyLoad);
}

四、在需要懒加载的地方调用 js 函数进行加载

通常在页面初始化或者加载期间执行

  // 初始化懒加载
  initLazyLoad();