页面加载时检测图片加载错误并替换为默认图的实现问题排查

原代码失效的核心原因 #

• 变量名拼写错误：你定义的图片集合变量为images，但判断条件中错误写为image[i]，缺少末尾的s，直接触发引用异常导致代码整体失效
• 判断逻辑错误：complete属性仅代表图片完成了加载流程，无论加载成功还是加载失败都会返回true，无法筛选出加载出错的图片
• 逻辑时机缺陷：window.onload会等待页面所有静态资源加载完成后才触发，替换操作的滞后性会导致用户长时间看到裂图占位

修复后的可用代码 #

版本1：基于原有遍历逻辑修改 #

window.onload = function() {
    var images = document.images;
    for (var i = 0; i < images.length; i++) {
        // 加载失败的图片自然宽高会为0
        if (images[i].naturalWidth === 0) {
            images[i].src = 'assets/default-avatar.jpg';
        }
    }
}

版本2：更优的全局监听方案（实时替换，无需等待全页加载） #

// 开启捕获模式监听全局error事件（img的error事件不冒泡，必须在捕获阶段处理）
window.addEventListener('error', function(e) {
    if (e.target.tagName.toLowerCase() === 'img') {
        e.target.src = 'assets/default-avatar.jpg';
    }
}, true);

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