解决js图片加载时出现404的问题

运营网站久了之后，无法避免会出现图片404的情况，原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。

img标签事件属性

img标签可使用的时间属性有：

dragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onfocus,onkeydown,onkeypress,onkeyup,onload,onmessage,onmousedown,onmousemove,onmouSEOver,onmouSEOut,onmouseup,onmousewheel,onresize,onscroll,onselect,onsubmit,onunload img标签常用的事件如下：

onerror：图像加载过程中发生错误时被触发。 onabort：图片加载的时候，用户通过点击停止加载时触发，通常在这里触发一个提示：“图片正在加载”。

当图片加载完成之后触发。

1. 对图片监听onerror事件

rush:js;">

// 原生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

rush:js;"> // 通常不会再HTML里面内联js，可以使用.error对图片进行监听处理 $('#test img').error(function() { $(this).hide(); // $(this).attr("src","images/demo.png"); });

注意：

jQuery加载需要在img前，处理函数需在img后

3. 使用函数处理

rush:js;"> // 原生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. 获取图片信息：图片是否可下载，图片宽高

rush:js;"> 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. 下载并插入图片

rush:js;"> var report = $id('report'),callback = { success : function () { report.innerHTML += '

Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')

'; },failure : function () { report.innerHTML += '

Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')

'; },target : 'target' };

image('img',callback);
image('images/banner/banner_2.jpg',callback);

以上就是js针对图片加载时出现404问题的解决办法，希望大家有所收获。