运营网站久了之后,无法避免会出现图片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事件
// 原生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
注意:
jQuery加载需要在img前,处理函数需在img后3. 使用函数处理
// 主要逻辑
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('images/banner/banner_2.jpg',{
success : function () {console.log('sucess')},failure : function () {console.log('failure')},target : 'myContainerId',insertBefore : 'someChildOfmyContainerId'
});
2. 下载并插入图片
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问题的解决办法,希望大家有所收获。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。