网站运营久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。
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
img标签常用的事件如下:
onerror:图像加载过程中发生错误时被触发。
onabort:图片加载的时候,用户通过点击停止加载时触发,通常在这里触发一个提示:“图片正在加载”。
onload:当图片加载完成之后触发。
1. 对图片监听onerror事件
HTML:
<img src="someimage.png" onerror="imgError(this);" />
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
// 通常不会再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('http://www.szhulian.com/Public/home/images/logo.png', {
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('http://www.szhulian.com/Public/home/images/logo.png', callback);
专业的网站建设公司,深正互联,如您有网站营销需求,请您关注我们,或者致电13828884598

猜你喜欢
联络方式:
深圳 · 龙岗 · 大运软件小镇22栋302-308
电话:400 1828 580
邮箱:szhulian@qq.com



-
为什么网站一点效果都没有?
在网上去仔细看一下,很多看似精美的网站其实存在不少错误,网页找不到,链接错误,找半天也找不到电话地址等联系方式,看半天不知道是什么产品
-
企业网站建设过程中关键因素
随着近年来互联网的高速发展以及网络基础设施的完善,越来越多的企业和个人投身到网络营销之中。其中还有非常多的中小企业,他们资源有限 ...
-
微信版网页如何排版才更显得漂亮
在这个快节奏的时代,微信网页开发的漂亮与否是你能否吸引到用户的关键一步。而网页是否漂亮,最关键的一点就是排版。好的排版能够让读者看得心情愉悦,而差劲的排版则不仅仅会给读者留下差劲的影响...
-
2021年云计算行业五大趋势【必看】
2020 年发生的众多事件让对 2021 年的大多数预测浮出水面。人工智能(AI)和物联网(IoT)等热门技术趋势仍将在明年重塑我们生活的方式。然而,最重要的用处是帮助我们在这个不断变化的时代下适应和生存...
-
【网站优化营销】seo优化怎么写好网站的标题
SEO标题也就是搜索引擎比较看重的title,针对搜索引擎优化的标题,使其符合搜索引擎的规则,更容易参与排名。因为标题是一个网页的核心,网页标题是告诉搜索引擎这个页面的主题,所以标题是seo网站优化中最重要的影响因素...