本文介绍一种通过拦截 beforeunload 事件并配合图片 onerror 回调，实现“阻塞式等待全部图片加载失败后再继续脚本执行”的实用技巧，适用于无法修改后续 CMS 生成跳转代码的受限场景。
本文介绍一种通过拦截 `beforeunload` 事件并配合图片 `onerror` 回调，实现“阻塞式等待全部图片加载失败后再继续脚本执行”的实用技巧，适用于无法修改后续 cms 生成跳转代码的受限场景。
在前端开发中，无法真正“阻塞”JavaScript 执行以等待异步事件（如图片加载失败）完成——这是浏览器事件循环机制决定的硬性限制。你不能使用 while (!image.error) { } 这类同步轮询，它不仅会冻结页面、触发浏览器警告，而且根本无法检测到尚未发生的 onerror 事件。但面对 CMS 生成的不可修改跳转代码（如 <script>location.href = "...";</script>），我们仍可通过巧妙的“拦截 + 延迟重定向”策略达成目标。
核心思路：拦截跳转，再择机触发
由于你无法阻止 CMS 脚本运行，唯一可行路径是：先阻止其跳转行为，等所有图片确认失败后，再主动执行跳转。关键在于利用 beforeunload 事件——它在页面即将卸载（包括 location.href 赋值触发的导航）前触发，且允许我们在此刻“覆盖”原跳转目标。
以下为完整、可直接部署的解决方案：
// 1. 定义待检测图片 URL 列表（支持任意数量）
const imageUrls = [
'https://www.hootv.lt/bitrix/spread.php?s=QklUUklYX1NNX1VJREgBbjVkZXNEQ2IzVnU4ckRSSmlCbW82R0xKdmNWcUV2UzUBMAEvAQExATECQklUUklYX1NNX1VJREwBMzcwNjU0NTQyMDcBMAEvAQExATECQklUUklYX1NNX1VJREQBMjVwbmJzNjNkY2VrNGRuZ2VmaGEyYXZsMm1taGh6YWMBMTcyNjMzNjUzMAEvAQExATECQklUUklYX1NNX05DQwFZATE3MjYzMzY1MzABLwEBAQJCSVRSSVhfU01fQ0MBTABALwEBAQI%3D&k=c545bd21253d81d854fc3698d4b20854',
// ... 添加 url2, url3, ..., url33
];
// 2. 记录跳转目标，并初始化计数器
let redirectTarget = null;
let errorCount = 0;
const totalImages = imageUrls.length;
// 3. 拦截首次跳转（关键！）
window.addEventListener('beforeunload', () => {
// 保存原始跳转地址（CMS 设置的 location.href）
redirectTarget = location.href;
// 立即用 204 响应页覆盖跳转，取消本次导航
setTimeout(() => {
// 推荐：替换为你的自有 204 接口（如 /api/noop），避免依赖外部服务
location.href = 'https://www.google.com/gen_204';
}, 1);
}, { once: true });
// 4. 加载所有图片，并监听 onerror
imageUrls.forEach(url => {
const img = new Image();
img.onerror = () => {
errorCount++;
// 当所有图片均失败时，执行最终跳转
if (errorCount === totalImages && redirectTarget) {
location.href = redirectTarget;
}
};
img.src = url; // 触发加载
});⚠️ 重要注意事项
- setTimeout 不可省略：直接在 beforeunload 回调中赋值 location.href 会被浏览器静默忽略，必须包裹在 setTimeout(..., 1) 中延迟执行。
- 204 接口需可控：示例中使用了 Google 的 gen_204，但生产环境强烈建议部署自有 204 端点（返回 HTTP 204 No Content），避免外部依赖失效或合规风险。
-
防御性清理（可选但推荐）：若页面可能不包含 CMS 跳转脚本，应在 DOMContentLoaded 后移除 beforeunload 监听器，防止误拦截用户正常操作：
document.addEventListener('DOMContentLoaded', () => { // 若确定无需拦截，可安全移除 // window.removeEventListener('beforeunload', yourHandler); }); - 浏览器兼容性与长期风险：该方案已在 Chrome 116+ 和 Firefox 117+ 验证有效，但属非标准用法。未来浏览器可能限制 beforeunload 对自动导航的干预能力，请将其视为临时过渡方案，并尽快推动 CMS 层面的根本解决（如插件钩子、服务端渲染控制等）。
此方法绕开了“同步阻塞”的死结，以事件驱动和导航拦截为杠杆，在受限条件下实现了业务逻辑闭环——精准、轻量，且不依赖第三方库。
