如何实现水平滚动容器中的图片懒加载-html教程-PHP中文网

如何实现水平滚动容器中的图片懒加载

浏览器原生 loading="lazy" 仅对垂直滚动有效，无法可靠支持 overflow-x 水平滚动场景；需借助 IntersectionObserver（推荐）或滚动监听降级方案，手动控制图片加载时机。

浏览器原生 `loading="lazy"` 仅对垂直滚动有效，无法可靠支持 `overflow-x` 水平滚动场景；需借助 `intersectionobserver`（推荐）或滚动监听降级方案，手动控制图片加载时机。

在构建横向滚动画廊、时间轴或商品列表等 UI 时，开发者常期望复用原生懒加载（）来提升性能。但现实是：当前所有主流浏览器（Chrome、Firefox、Safari）均未将水平滚动容器（如 overflow-x: auto）纳入原生懒加载的“可视区域”判定逻辑中。其根本原因在于，原生实现依赖页面主滚动容器（即 document.scrollingElement）的垂直滚动偏移与高度计算，而对 scrollLeft、getBoundingClientRect().left/right 等水平视口指标缺乏响应式监听能力。因此，即使图片位于水平滚动容器外侧，浏览器仍可能提前全部加载，导致带宽浪费与首屏性能下降。

✅ 推荐方案：使用 IntersectionObserver（现代、高效、声明式）

IntersectionObserver 天然支持任意滚动上下文，包括水平滚动容器内的元素。只要目标元素进入其父容器视口（而非整个页面），即可精准触发加载：

<div class="scroll-container">
  <img alt="Item 1" class="lazy"    style="max-width:90%"   style="max-width:90%"><img alt="Item 2" class="lazy"    style="max-width:90%"   style="max-width:90%"><!-- 更多图片 -->
</div>

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth; /* 可选：启用平滑滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 惯性滚动优化 */
}
.scroll-container img {
  flex: 0 0 auto; /* 防止拉伸，保持固有尺寸 */
  width: 200px;
  height: 150px;
  margin-right: 12px;
}

document.addEventListener("DOMContentLoaded", () => {
  const lazyImages = document.querySelectorAll("img.lazy");

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove("lazy");
            // 加载后立即停止观察，避免重复触发
            observer.unobserve(img);
          }
        });
      },
      {
        // 关键配置：指定水平滚动容器为根，而非默认 document
        root: document.querySelector(".scroll-container"),
        rootMargin: "0px 0px 0px 0px", // 可扩展触发范围，如 "0px 100px"
        threshold: 0.01 // 微小交叠即触发（兼容低分辨率设备）
      }
    );

    lazyImages.forEach(img => observer.observe(img));
  } else {
    // 降级方案：见下文
  }
});

⚠️ 注意：务必显式设置 root 为 .scroll-container，否则 IntersectionObserver 默认监听整个文档视口，仍将失效。

⚙️ 兼容性降级：手动监听 scroll/resize（适用于 IE11 或旧版 Safari）

当 IntersectionObserver 不可用时，需监听容器的 scroll 事件，并结合 getBoundingClientRect() 判断图片是否进入容器可视区域：

// 降级逻辑（简化版，含节流与清理）
const container = document.querySelector(".scroll-container");
let active = false;

const lazyLoad = () => {
  if (active) return;
  active = true;

  setTimeout(() => {
    lazyImages.forEach(img => {
      const rect = img.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();
      // 判断图片是否在容器水平可视范围内
      if (
        rect.left  containerRect.left
      ) {
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        // 从待处理列表中移除
        const index = Array.from(lazyImages).indexOf(img);
        if (index > -1) {
          lazyImages[index].remove(); // 或 filter 后重新赋值
        }
      }
    });
    active = false;
  }, 16); // 约 60fps 节流
};

container.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);