Safari 11.1中Window load相关函数无法正常工作的技术求助

我之前在旧版Safari里也踩过这个坑，尤其是需要等所有图片加载完成的时候，各种window.load写法都不生效，给你几个亲测有效的思路：

1. 先排查是否有图片加载失败阻塞了事件 #

Safari 11.x有个特殊的兼容性问题：如果页面里存在加载失败的图片（比如404、跨域错误），它可能会卡住window.load事件不触发，而Chrome这类浏览器会忽略失败的资源正常触发事件。你可以给所有图片加上错误监听，兜底处理失败的情况：

// 给所有图片添加错误处理，避免阻塞load事件
document.querySelectorAll('img').forEach(img => {
  img.addEventListener('error', function() {
    console.warn('图片加载失败:', this.src);
    // 可选：设置一张默认占位图，或者标记该图片已处理
    this.src = '/path/to/default-image.png';
  });
});

2. 手动统计图片加载状态（替代window.load） #

如果上面的方法没用，不如直接绕开window.load，手动监听所有图片的加载状态——不管成功还是失败，只要所有图片都完成加载（包括失败的）就执行你的代码：

function waitForAllImages(callback) {
  const allImages = document.querySelectorAll('img');
  let loadedCount = 0;
  const totalImages = allImages.length;

  // 没有图片的话直接执行回调
  if (totalImages === 0) {
    callback();
    return;
  }

  // 检查是否所有图片都已加载
  const checkCompletion = () => {
    if (loadedCount === totalImages) {
      callback();
    }
  };

  allImages.forEach(img => {
    // 处理已经加载完成的图片（比如缓存中的）
    if (img.complete) {
      loadedCount++;
      checkCompletion();
      return;
    }

    // 监听加载成功和失败
    img.addEventListener('load', () => {
      loadedCount++;
      checkCompletion();
    });
    img.addEventListener('error', () => {
      loadedCount++;
      checkCompletion();
    });
  });
}

// 使用示例：
waitForAllImages(() => {
  // 这里写你需要等所有图片加载完成后执行的代码
  console.log('所有图片已处理完毕（成功/失败都算）');
});

3. 注意动态添加的图片 #

如果你的页面是通过JS动态添加图片标签，window.load只会监听初始DOM里的资源，这时候可以把上面的waitForAllImages函数改成可复用的，每次新增图片后重新调用一次即可。

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