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

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

img的onerror事件

<img src='1.jpg' alt='test' onerror="this.src='default.jpg'">

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

onerror属性

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

         <img src="image.gif" onerror='this.src="default.gif" />

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

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

当然还可以使用这种方式


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].onerror=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事件。