CSS Grid与图片懒加载无法协同工作，求解决方案

我正在学习前端开发，目前搭建个人作品集时遇到了CSS Grid和图片懒加载的兼容问题。

我用Intersection Observer监听图片，从data-src加载图片内容。滚动到图片区域时，只有第一行图片能正常加载，其余行的图片完全无法加载，就像对观察者不可见一样。

关闭多列布局后一切正常，但页面会变得过长，只适合移动端，不适合桌面端。

我使用的CSS Grid代码： #

display: grid;
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));

图片懒加载的JS代码： #

const lazyImages = document.querySelectorAll("img[data-src]");

const imgCallBack = (entries, observer) => {
  const [entry] = entries;
  if (!entry.isIntersecting) return;

  entry.target.src = entry.target.dataset.src;

  entry.target.addEventListener("load", () => {
    entry.target.classList.remove("blured");
  });

  observer.unobserve(entry.target);
};

const imgOptions = { root: null, threshold: 0, rootMargin: "900px" };

const imgObserver = new IntersectionObserver(imgCallBack, imgOptions);

lazyImages.forEach((img) => imgObserver.observe(img));

请问怎么让其余行的图片正常加载？感谢帮助！

问题原因及解决方法 #

这个问题的核心是CSS Grid布局下，未加载的图片高度为0，导致Grid容器的行高被压缩，后续图片的位置被“挤”到了当前视口之外的不可见区域，Intersection Observer自然检测不到它们。

给你几个可行的解决方案：

• 给图片容器或图片本身设置固定/最小高度
  给图片添加min-height属性，或者给每个Grid项（图片的父容器）设置最小高度，确保Grid布局能正确计算出行高，后续图片的位置不会偏移：

  /* 给图片设置最小高度，根据你的设计调整数值 */
  img[data-src] {
    min-height: 20rem;
    /* 可选：添加背景占位，提升用户体验 */
    background: #f1f1f1;
  }
  

• 使用aspect-ratio属性固定图片比例
  如果你的图片是固定比例的（比如16:9、4:3），可以用aspect-ratio来预留空间，这样Grid能正确计算布局：

  img[data-src] {
    aspect-ratio: 16/9; /* 根据你的图片比例调整 */
    object-fit: cover; /* 可选：保持图片比例填充容器 */
  }
  

• 调整Intersection Observer的rootMargin（临时方案）
  把rootMargin调大，比如设为2000px，让观察者提前检测到更远处的图片，但这只是临时 workaround，不如前两种方法可靠：

  const imgOptions = { root: null, threshold: 0, rootMargin: "2000px" };
  

• 给Grid项设置grid-auto-rows属性
  直接在Grid容器上设置grid-auto-rows，强制每行的最小高度：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    grid-auto-rows: minmax(20rem, auto); /* 最小高度20rem，可根据需求调整 */
  }
  

优先推荐前两种方法，既能解决懒加载问题，又能保证布局的稳定性和用户体验。

内容的提问来源于stack exchange，提问作者nekultivisan