背景:如果无法加载图像资源,则替换为默认图像
解决方法:
另一方面,js方法onerror: 1,直接用于html标签
复制代码2并使用本机js方法:
document.getelementbyid('#img ' ).onerror=function )。
this.src='images/errorLogo.png ';
}代码3,复制jquery封装后的error方法:
$ ' img '.error (功能) ) ) ) ) )。
$(this ).attr )、) src、) images/errorLogo.png );
} )复制代码
如果默认图像加载失败,上述方法将进入死循环。 可以通过以下方法解决:
$(img ) ).one )、error )、function ) }
$(this ).attr )、) src、) images/default.png );
); 复制代码
或者,将onerror封装为函数,加载onerror,然后将其重置为null,如下所示:
函数noimg () }
var img=event.srcElement;
img.src='images/errorLogo.png ';
img.nerrr=null;
}
复制代码
二是不支持onerror时,利用css3的背景设置多个背景图像
背景图像: URL (images/logo.png )、URL (images/error logo.png ); 复制代码
以这种方式,第一个图像显示在第二个图像上,不显示加载上一个url失败的直接图像,而是直接显示后面的默认图像资源。 要获得img单张的效果,必须添加以下属性并指定宽度高度
后台- repeat :否- repeat;
背景大小: cover; 复制代码
此方法问题:如果两个图像都成功加载,则如果第一个图像部分透明,则可以看到第二个图像。
有关详细信息,请参阅使用多背景图像。