阻塞页面JavaScript执行直至所有图片触发onerror事件

你之前的while循环方案无效的核心原因是：JavaScript是单线程模型，同步while循环会持续占用主线程，导致事件队列中的onerror事件无法被处理，永远无法触发状态变更。要解决这个问题，必须在等待过程中让主线程有机会处理事件队列。

方案1：使用Atomics.wait（推荐，需跨域隔离） #

利用SharedArrayBuffer和Atomics API实现同步等待，这是浏览器原生支持的同步阻塞方法，且不会完全卡死事件循环。

代码示例 #

// 初始化共享内存，用于同步状态
const sab = new SharedArrayBuffer(4);
const status = new Int32Array(sab);
status[0] = 0; // 0: 未完成，1: 所有onerror已触发

const totalImages = 3; // 替换为你的图片数量
let completedCount = 0;

// 创建目标Image对象并绑定onerror事件
for (let i = 0; i < totalImages; i++) {
  const img = new Image();
  img.onerror = () => {
    completedCount++;
    if (completedCount === totalImages) {
      // 更新状态并通知等待的线程
      Atomics.store(status, 0, 1);
      Atomics.notify(status, 0);
    }
  };
  img.src = `empty.php?id=${i}`; // 替换为你的图片URL
}

// 同步等待所有onerror触发
Atomics.wait(status, 0, 0);

注意事项 #

• 此方法需要浏览器启用跨域隔离，需在服务器响应头中设置：

  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp
  

• 兼容性：现代浏览器（Chrome 68+、Firefox 79+、Edge 79+）均支持。

方案2：同步XMLHttpRequest循环（无特殊依赖） #

通过发送同步空请求的方式，让主线程在循环中短暂释放，允许事件队列处理onerror事件。这是兼容性更好的hack方案，无需特殊服务器配置。

代码示例 #

let allErrorsTriggered = false;
const totalImages = 3; // 替换为你的图片数量
let completedCount = 0;

// 创建目标Image对象并绑定onerror事件
for (let i = 0; i < totalImages; i++) {
  const img = new Image();
  img.onerror = () => {
    completedCount++;
    if (completedCount === totalImages) {
      allErrorsTriggered = true;
    }
  };
  img.src = `empty.php?id=${i}`; // 替换为你的图片URL
}

// 循环等待，每次发送同步空请求让出线程
while (!allErrorsTriggered) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'data:,', false); // 同步请求空数据URI
  xhr.send();
}

原理说明 #

每次同步XHR的send()执行时，浏览器会暂时暂停JS执行，处理事件队列中的待处理任务（包括Image的onerror），之后继续执行循环。这样既实现了同步阻塞，又不会完全卡死主线程。

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