可通过监听error事件或遍历检查img元素的complete/naturalwidth状态识别加载失败图片。推荐用事件委托在捕获阶段监听全局error；也可页面就绪后遍历检查；关键图片可手动绑定onload/onerror；需注意cors、懒加载和base64等特殊情况。
可以通过监听 error 事件，配合全局记录或遍历检查，来识别页面中加载失败的图片。核心思路是：在图片加载出错时捕获事件，或在页面就绪后主动检查已存在的 <img> 元素的 naturalWidth 或 complete 状态。
方法一：动态监听所有 img 的 error 事件（推荐）
适用于图片动态插入或需实时捕获失败情况。利用事件委托，避免为每个图片单独绑定：
document.addEventListener('error', function(e) {
if (e.target && e.target.tagName === 'IMG') {
console.warn('图片加载失败:', e.target.src);
// 可在此处收集、标记、上报或替换占位图
}
}, true); // 使用捕获阶段，确保能捕获到未冒泡前的 error
注意：error 事件不会冒泡（部分浏览器），但设置 useCapture = true 可在捕获阶段捕获；现代浏览器基本支持该方式。
方法二：遍历已有 img 元素检查加载状态
适合页面加载完成后一次性排查（如调试、监控脚本）：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function findFailedImages() {
const imgs = document.querySelectorAll('img');
const failed = [];
imgs.forEach(img => {
// 已触发 error 事件或自然尺寸为 0，通常表示加载失败
if (!img.complete || img.naturalWidth === 0 || img.naturalHeight === 0) {
// 排除 src 为空、data-url、或 placeholder 类图片（可选）
if (img.src && !img.src.startsWith('data:') && !img.classList.contains('placeholder')) {
failed.push({
element: img,
src: img.src,
status: `width=${img.naturalWidth}, height=${img.naturalHeight}`
});
}
}
});
return failed;
}
// 调用
console.log('加载失败的图片:', findFailedImages());
关键判断依据：
-
img.complete === false：说明尚未加载完成或加载失败（但注意：有些浏览器对 CORS 图片可能返回true即使失败） -
img.naturalWidth === 0：绝大多数情况下表明图片未成功解码（404、跨域拒绝、格式错误等） - 组合判断更可靠，单靠
complete不足
方法三：结合 onload / onerror 手动增强监控（适合关键图片）
对重要图片显式绑定处理逻辑，便于精准控制：
function trackImage(img) {
img.addEventListener('load', () => {
console.log('✅ 图片加载成功:', img.src);
});
img.addEventListener('error', () => {
console.error('❌ 图片加载失败:', img.src);
// 可替换为备用图
img.src = '/images/placeholder-failed.png';
});
}
// 对现有图片批量处理
document.querySelectorAll('img').forEach(trackImage);
// 对未来插入的图片也可用 MutationObserver 监听并自动 track
补充提醒
以下情况可能导致误判或需特殊处理：
-
CORS 图片：跨域图片若未设置
crossorigin，即使加载成功，也可能无法读取naturalWidth（返回 0），建议统一加crossorigin="anonymous" -
懒加载图片：
loading="lazy"的图片可能尚未触发加载，complete为false属正常，应结合getBoundingClientRect()或 IntersectionObserver 判断是否应已加载 -
SVG 或 base64 图片：极少失败，但若 data URL 损坏，仍会触发
error，naturalWidth同样为 0
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
