动态创建的img元素src加载异常无法触发error事件解决方案问询

两个方案失败的原因 #

• 方案1失败核心原因：error 事件本身不支持冒泡，jQuery的事件委托机制依赖事件向上冒泡到父级元素才能触发，因此绑定在document上的error监听无法捕获到img元素的加载错误事件，替换为mouseover可正常触发是因为鼠标事件支持冒泡特性。
• 方案2失败是选择器使用错误：$(t.id)是错误的id选择器写法（缺少#前缀），且无需通过id重新查找元素，传入函数的参数已经是当前img元素实例，直接操作即可。

正确实现方式 #

方案A：创建元素时直接绑定error事件（最推荐） #

在动态生成img元素的同时直接绑定error事件，不需要事件委托也不需要行内属性，写法如下：

// 动态创建img的逻辑
const $img = $(`<img class="tn" id="${id}" src="${d.aUrl}" />`);
// 绑定error事件
$img.on('error', function() {
  // 先解绑error事件，避免备用图加载失败时无限循环触发
  $(this).off('error').attr('src', 'alt_pic.jpg');
});
// 把img插入到对应容器即可，示例：$('.img-container').append($img)

方案B：修复行内onerror写法 #

如果要保留行内onerror的写法，修改代码如下即可：

1. 动态生成的img标签不变：

<img class="tn" id="'+id+'" src="'+d.aUrl+'" onerror="replace_image(this)" />

2. 修正处理函数：

function replace_image(t){
  // 先清空onerror属性，避免备用图加载失败触发死循环
  t.onerror = null;
  // 直接操作传入的img元素修改src，不需要通过id查找
  t.src = 'alt_pic.jpg';
}

注意事项 #

• 备用图片的路径要确保正确，相对路径是相对于当前页面的路径，不是js文件的路径
• 必须清空error事件/onerror属性，避免备用图加载失败时反复触发事件造成死循环

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