使用浏览器级lazy-loading时如何检测页面所有图片已完全加载

结论是可以检测，需要先明确你要的检测场景，两种场景的实现逻辑有差异：

场景1：检测所有已经触发加载请求的懒加载图片是否全部加载完成 #

原生懒加载的逻辑是只有当图片进入浏览器预设的视口阈值范围时，才会发起资源请求，未进入视口的图片不会主动加载。如果只需要统计已经触发请求的图片的加载状态，可以用以下方案：

• 先统计页面内所有带loading="lazy"属性的图片总数，再对每张图片监听load（加载成功）和error（加载失败）事件，每完成一张就累加计数，直到计数等于总数即代表所有已触发请求的图片都处理完成
• 参考代码：

const lazyImages = document.querySelectorAll('img[loading="lazy"]');
let processedCount = 0;
const totalLazyImages = lazyImages.length;

// 检查是否全部处理完成
function checkAllProcessed() {
  if (processedCount === totalLazyImages) {
    // 所有已触发请求的懒加载图片都处理完成（包含加载失败的情况）
    console.log('目标图片全部处理完成');
  }
}

lazyImages.forEach(img => {
  // 跳过已经加载完成的图片，直接计数
  if (img.complete) {
    processedCount++;
    checkAllProcessed();
    return;
  }
  // 监听加载成功
  img.addEventListener('load', () => {
    processedCount++;
    checkAllProcessed();
  }, { once: true });
  // 监听加载失败，避免报错阻塞计数
  img.addEventListener('error', () => {
    processedCount++;
    checkAllProcessed();
  }, { once: true });
});

• 注意：如果用户没有滚动页面让所有图片进入视口，未触发加载的图片不会触发任何事件，计数永远不会达到总数。

场景2：检测页面所有懒加载图片（无论是否在视口内）全部加载完成 #

如果需要强制所有懒加载图片都加载完成再执行逻辑，可以手动修改所有懒加载图片的loading属性为eager，强制浏览器立刻发起所有图片的加载请求，再复用上面的监听逻辑即可：

• 只需在上述代码的遍历逻辑前，添加一行代码强制触发所有懒加载图片加载：

lazyImages.forEach(img => img.loading = 'eager');

补充说明：不支持原生loading="lazy"属性的老旧浏览器会自动忽略该属性，所有图片默认按即时加载逻辑处理，上述代码可以正常兼容这类场景。

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