图片加载失败如何替换成默认图片

img元素加载图片失败，则变成一个小图标，让页面变得难看。此时如何替换为默认图片？

如果img标签是少量的话，可以使用这个：

img的onerror事件

<img src='1.jpg' alt='test' οnerrοr="this.src='default.jpg'">

//alt属性的意思是在图片为加载成功时显示的文字

onerror属性

img元素自带onerror属性，加载失败时，触发error事件

         <img src="image.gif" οnerrοr='this.src="default.gif" />

这样依然会有一个小问题，当default.gif加载也失败的时候就进入了死循环，解决办法是

当图片加载失败，进入onerror的时候，判断onerror的图片是不是能加载，在onerror中的图片触发onerror的时候，设置onerror为null。

当然还可以使用这种方式

var imgs = document.images; // images 集合可返回对文档中所有 Image 对象的引用。
for(var i = 0;i < imgs.length;i++){
   imgs[i].onerror = function(){
   this.src = "[!--news.url--]skin/default/images/notimg.gif";
}
}

关于document.images;如下：

属于document的内容

 

jquery.error的函数

jquery提供对应的事件处理函数

         $('img').error(function(){

    $(this).attr('src',"default.gif");

})

类似于原生js选择页面中所有的img标签，利用的原生error事件，如下：

Var imgs=document.getElementsBytargName(‘img’);

for(var i=0;i<imgs.length;i++){

imgs[i].οnerrοr=function(){

 this. setAttribute(‘src’,’ default.gif’);

 //this.src=’default.gif’;

}

}

jquery.one函数

使用上面两种方法，假如默认图片也加载失败，也会变成死循环. 此时可使用one()绑定事件

         $("img").one("error", function(e){

     $(this).attr("src", "default.gif");

});

注意error事件，不支持冒泡，jquery.delegate/ jquery.on事件委托函数捕捉不到error事件。

 

转载于:https://www.cnblogs.com/itpi/p/5847717.html