WordPress 5.8.1下Intersection Observer仅最底部图片懒加载问题求助

问题核心原因 #

1. 脚本执行顺序错误：原生懒加载逻辑中document.querySelectorAll("[data-src]")的执行时机，早于jQuery给img标签添加data-src属性的逻辑执行时机，初始化观察者时仅捕获到了执行瞬间已经带有data-src属性的最后一张图片，其余图片是后续才被添加data-src属性，没有被注册到观察者中，因此无法触发懒加载。
2. 缺少DOM就绪监听：两段脚本都未包裹在DOM加载完成的回调中，可能页面DOM未完全渲染就执行了逻辑，导致元素捕获不全。
3. 未移除原始src属性：jQuery代码中注释掉了移除src属性的逻辑，浏览器会直接加载img标签原始src对应的图片，懒加载逻辑实际未生效。

修复方案 #

调整后的jQuery属性处理代码 #

将逻辑包裹在DOM就绪回调中，处理完所有图片属性后再调用懒加载初始化函数：

/*change img src to img data-src for lazy load*/
$(document).ready(function() {
  $("img").each(function () {
    const originalSrc = $(this).attr("src");
    if (!originalSrc) return;
    $(this).attr("data-src", originalSrc);
    $(this).addClass('lazyload');
    $(this).removeAttr("src");
    // 可自行添加占位图逻辑：$(this).attr("src", "/path/to/placeholder.png");
  });
  // 所有图片属性处理完成后再初始化懒加载
  initLazyLoad();
});

调整后的懒加载代码 #

封装为可调用的函数，保证在所有图片属性处理完成后再执行初始化：

/*Lazy load images*/
function initLazyLoad() {
  const allViews = document.querySelectorAll("[data-src]");
  if (allViews.length === 0) return;

  function preloadImage(img) {
    const src = img.getAttribute("data-src");
    if (!src) return;
    img.src = src;
    img.removeAttribute("data-src");
  }

  const options = {
    root: null,
    threshold: 0,
    rootMargin: "200px 0px", // 提前200px加载，优化滚动体验
  };

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      preloadImage(entry.target);
      observer.unobserve(entry.target);
    });
  }, options);

  allViews.forEach((image) => {
    observer.observe(image);
  });
}

补充排查建议 #

• 打开浏览器控制台执行document.querySelectorAll("[data-src]")，确认返回的元素数量和页面实际img数量是否一致，可快速定位是否是属性添加时机的问题
• 检查lazyload类的CSS样式，保证图片有最小高度，避免高度为0时Intersection Observer判定异常

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