如何在内容加载完成后、图片加载前执行JavaScript添加loading="lazy"

问题分析 #

你当前的代码逻辑是仅给不在视口（含缓冲区域）的图片添加loading="lazy"，所以视口内的图片没有这个属性，会被浏览器立即加载。如果要实现「给所有图片都加上loading="lazy"」，或者进一步实现「所有图片（包括视口内的）都延迟加载」，可以用以下两种方案：

方案1：给所有图片直接添加loading="lazy" #

如果只是需要给所有图片统一加上该属性（不管位置），直接去掉视口判断逻辑即可：

function addLazyToAllImgs() {
  const images = document.getElementsByTagName('img');
  for (let i = 0; i < images.length; i++) {
    images[i].setAttribute('loading', 'lazy');
    console.log(`已给图片添加loading="lazy": ${images[i].src}`);
  }
}
document.addEventListener("DOMContentLoaded", addLazyToAllImgs);

注意：即使给视口内的图片加上loading="lazy"，浏览器仍然会加载这些图片——这是该属性的标准行为，它只会延迟加载不在当前视口及附近范围的图片，视口内的图片还是会正常加载。

方案2：实现全局延迟加载（含视口内图片） #

如果需要让所有图片（哪怕在视口内）都不立即加载，需要结合src占位替换的方式：

function setupFullLazyLoad() {
  const images = document.getElementsByTagName('img');
  const viewportH = window.innerHeight || document.documentElement.clientHeight;
  const viewportW = window.innerWidth || document.documentElement.clientWidth;

  // 第一步：暂存真实地址，替换为占位图
  for (let i = 0; i < images.length; i++) {
    const img = images[i];
    img.dataset.src = img.src; // 把真实地址存在data-src里
    // 替换为1x1透明占位图，避免立即加载
    img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
    img.setAttribute('loading', 'lazy');
  }

  // 第二步：加载进入视口的图片
  function loadVisibleImgs() {
    for (let i = 0; i < images.length; i++) {
      const img = images[i];
      if (!img.dataset.src) continue; // 跳过已加载的图片

      const rect = img.getBoundingClientRect();
      // 判断图片是否进入视口（含100px缓冲）
      const isInView = rect.top < viewportH + 100 && 
                       rect.bottom > -100 && 
                       rect.left < viewportW + 100 && 
                       rect.right > -100;

      if (isInView) {
        img.src = img.dataset.src;
        delete img.dataset.src; // 清除暂存的地址
        console.log(`已加载图片: ${img.src}`);
      }
    }
  }

  // 初始检查+监听滚动/窗口 resize
  document.addEventListener("DOMContentLoaded", loadVisibleImgs);
  window.addEventListener("scroll", loadVisibleImgs);
  window.addEventListener("resize", loadVisibleImgs);
}

setupFullLazyLoad();

补充说明

• 如果页面有动态插入的图片，需要额外用MutationObserver监听DOM变化，对新插入的图片重复执行上述逻辑
• 缓冲区域（100px）可以根据需求调整，提前加载即将进入视口的图片，避免用户看到空白

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