背景:图片资源加载不出来时用默认图片替换
解决方法:
一,用js方法onerror:
1,直接在html标签中使用
<img src="images/logo.png" onerror="this.src='images/errorLogo.png';">复制代码
2,原生js方法:
document.getElementById('#img').onerror = function(){
this.src = "images/errorLogo.png";
}复制代码
3,jquery封装后的error方法:
$('img').error(function(){
$(this).attr('src',"images/errorLogo.png");
})复制代码
以上方法若默认图片加载失败,也会变成死循环,可使用如下方法解决:
$("img").one("error", function(){
$(this).attr("src", "images/default.png");
});复制代码
或将onerror封装在函数里面,加载onerror后重置为null,如下所示:
function noImg(){
var img=event.srcElement;
img.src="images/errorLogo.png";
img.onerror=null;
<img src="images/logo.png" onerror="noImg();">复制代码
二,不支持onerror时,利用css3的background设置多背景图片
background-image:url("images/logo.png"),url("images/errorLogo.png");复制代码
用这种方式第一张图会显示在第二张图片上面,前面url加载不成功直接图片不显示,将直接显示后面默认的图片资源,想要img单张的效果还需添加如下属性,并给定宽高
background-repeat: no-repeat;
background-size: cover;复制代码
这种方式的问题:两张图片都加载成功的情况下,第一张图片若有部分透明,会看到第二张图片。
详情可以查看多背景图像的使用方法:
developer.mozilla.org/zh-CN/docs/…