本文介绍JavaScript中处理图片加载失败（404）的三种常用方法。首先通过原生JS监听onerror事件，其次使用jQuery的.error()方法，最后封装通用函数以获取图片信息或动态插入。适用于运营网站时自动隐藏或替换损坏图片的场景。
图片404问题的背景与处理思路
随着网站运营时间的增长，图片资源出现404错误是难以避免的现象，这通常源于文件被删除、路径变更或服务器暂时不可用。针对这一问题，常见的处理策略包括在页面中隐藏该图片元素，或者将其自动替换为预设的默认占位图片，以优化用户体验。
img标签常用事件属性
img标签事件属性
img标签支持多种事件属性，用于响应不同的交互和加载状态。
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
在图片加载场景中，最常被调用的事件包括：
onerror：当图像加载过程中发生错误（如404）时被触发。 onabort：当用户点击停止加载按钮时触发，通常用于在此处显示“图片正在加载”的提示。 onload：当图片成功加载完成后触发。
原生JS与jQuery处理方案
1. 对图片监听onerror事件
<img src="someimage.png" onerror="imgError(this);" />
// 原生JS:
function imgError(image){
// 隐藏图片
image.style.display = 'none';
// 替换为默认图片
// document.getElementById("img").setAttribute("src", "images/demo.png");
}
// 使用jQuery处理:
function imgError(image){
$(image).hide();
// $(this).attr("src", "images/demo.png");
}
注意：需要将处理函数定义在head，防止图片加载出错时没有读取到处理函数
2. 使用jQuery监听error
// 通常不会再HTML里面内联js，可以使用.error对图片进行监听处理
$('#test img').error(function() {
$(this).hide();
// $(this).attr("src", "images/demo.png");
});
注意：jQuery加载需要在img前，处理函数需在img后
封装函数的高级应用
3. 使用函数处理
// 原生JS解决方案
function $id(id) {
return !id || id.nodeType === 1 ? id : document.getElementById(id);
}
function isType(o, t) {
return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0;
}
// 主要逻辑
function image(src, cfg) {
var img, prop, target;
cfg = cfg || (isType(src, 'o') ? src : {});
img = $id(src);
if (img) {
src = cfg.src || img.src;
} else {
img = document.createElement('img');
src = src || cfg.src;
}
if (!src) {
return null;
}
prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth';
img.alt = cfg.alt || img.alt;
// Add the image and insert if requested (must be on DOM to load or
// pull from cache)
img.src = src;
target = $id(cfg.target);
if (target) {
target.insertBefore(img, $id(cfg.insertBefore) || null);
}
// Loaded?
if (img.complete) {
if (img[prop]) {
if (isType(cfg.success,'f')) {
cfg.success.call(img);
}
} else {
if (isType(cfg.failure,'f')) {
cfg.failure.call(img);
}
}
} else {
if (isType(cfg.success,'f')) {
img.onload = cfg.success;
}
if (isType(cfg.failure,'f')) {
img.onerror = cfg.failure;
}
}
return img;
}
以上函数有许多用处：
1. 获取图片信息：图片是否可下载，图片宽高
image('img',{
success : function () { alert(this.width + "-" + this.height); },
failure : function () { alert('image 404!'); },
});
// 验证资源是否下载
image('images/banner/banner_2.jpg', {
success : function () {console.log('sucess')},
failure : function () {console.log('failure')},
target : 'myContainerId',
insertBefore : 'someChildOfmyContainerId'
}); 2. 下载并插入图片
var report = $id('report'),
callback = {
success : function () {
report.innerHTML += '<p>Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>';
},
failure : function () {
report.innerHTML += '<p>Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>';
},
target : 'target'
};
image('img', callback);
image('images/banner/banner_2.jpg', callback); 以上就是js针对图片加载时出现404问题的解决办法，希望大家有所收获。