我们可能会遇到这样的问题,当页面中的图片的加载失败时,我们想要该图片加载我们给的默认的图片,我在这里分享一下几种做法,希望对大家有所帮助。
1、在img标签中加上 οnerrοr="this.src='error.png ' ";
<img src="Images/1.png " οnerrοr="this.src='error.png ' " >
2、不想在每个img中都定义onerror事件的话,就使用jquery试试
JavaScript code
$(window).load(function() {
$('img').each(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
this.src = './image/logo.gif';
}
});
});
3、但是都要考虑,重载的图片仍然错误,就会陷入死循环
下面给出一个带重试次数,并且延迟加载的实现,超过重试次数仍不能正常显示的,显示缺省图片
<html>
<head>
<title>显示默认图片</title>
<scripttype="text/javascript">
functionshowImgDelay(imgObj,imgSrc,maxErrorNum){
}
</script>
</head>
<body>
<img onerror="showImgDelay(this,'123456.png',2);" src="666.png" width="200" height="200"/>
<spanid="showSpan"></span>
</body>
</html>