给一个客户做的网站，详情页中七八十张图片。所以需要处理加载过慢的问题。现在使用懒加载的方式来处理。

  <div class="pc-info d-none d-md-block">
          {content:content}
          {hmcms:pics num=200 id={content:id} field="ext_pc" }
           <img src="/static/images/loading.png" data-src="[pics:src]" class="w-100" alt="[pics:title]">
          {/hmcms:pics}
      </div>
      上面是PC端的代码，加载的图片。
      
      下面是wap端的代码，加载的图片。
      <div class="wap-info d-block d-md-none">
          {content:ext_wapcontent}
          {hmcms:pics num=200 id={content:id} field="ext_wap" }
            <img src="/static/images/loading.png" data-src="[pics:src]" class="w-100" alt="[pics:title]">
          {/hmcms:pics}
      </div>

然后我们使用以下的JS来实现。

1：找出容器里面的图片。并添加占位图片。

2：在视窗范围内，提前 200PX进行加载当前的图片。

document.addEventListener("DOMContentLoaded", function() {
  // 找出 pc-info 和 wap-info 容器里的所有图片
  const allImages = document.querySelectorAll(".pc-info img, .wap-info img");

  allImages.forEach(img => {
    // 如果没有 data-src（编辑器插入的图片），则改成占位图
    if (!img.dataset.src) {
      img.dataset.src = img.src;
      img.src = "/static/images/loading.png";
      img.classList.add("lazy");
    }
  });

  // 懒加载逻辑：无论是编辑器图片还是图集图片，都要监听
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.add("fade-in");
        observer.unobserve(img);
      }
    });
  }, { rootMargin: "200px" });

  allImages.forEach(img => observer.observe(img));
});

从代码中可以看出来，一开始加载的是：loading.png，只有当滚动浏览器到当前窗口位置的时候，图片才能替换成：data-src中的图片