yy日韩无码,富婆的诱惑,国产菊爆视频在线观看,国产精品无码AV高清波波AV,国产成人啪精品视频站午夜,已满十八岁免费观看电视剧十八岁,中文字幕av久久人妻蜜桃臀

給一個客戶做的網(wǎng)站，詳情頁中七八十張圖片。所以需要處理加載過慢的問題?，F(xiàn)在使用懶加載的方式來處理。

  <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來實現(xiàn)。

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

2：在視窗范圍內(nèi)，提前 200PX進行加載當(dāng)前的圖片。

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");
    }
  });

  // 懶加載邏輯：無論是編輯器圖片還是圖集圖片，都要監(jiān)聽
  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，只有當(dāng)滾動瀏覽器到當(dāng)前窗口位置的時候，圖片才能替換成：data-src中的圖片