解决js图片加载时出现404的问题
前端之家收集整理的这篇文章主要介绍了
解决js图片加载时出现404的问题，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
运营网站久了之后，无法避免会出现图片404的情况，原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。
img标签可使用的时间属性有：
SEOver,onmouSEOut,onmouseup,onmousewheel,onresize,onscroll,onselect,onsubmit,onunload
img标签常用的事件如下：
onerror：图像加载过程中发生错误时被触发。
onabort：图片加载的时候，用户通过点击停止加载时触发，通常在这里触发一个提示：“图片正在加载”。
当图片加载完成之后触发。
1. 对图片监听onerror事件
// 原生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
图片进行监听处理
$('#test img').error(function() {
$(this).hide();
// $(this).attr("src","images/demo.png");
});
注意：
jQuery加载需要在img前，处理
函数需在img后
3. 使用函数处理
解决方案
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. 获取图片信息：图片是否可下载，图片宽高
404!'); },});
// 验证资源是否下载
image('images/banner/banner_2.jpg',{
success : function () {console.log('sucess')},failure : function () {console.log('failure')},target : 'myContainerId',insertBefore : 'someChildOfmyContainerId'
});
2. 下载并插入图片
';
},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问题的解决办法，希望大家有所收获。
原文链接：https://www.f2er.com/js/51863.html
