img的onerror事件

1.在图片不存在或者网络状态不好的情况下，会存在图片加载不过来，用户体验很差：

2.解决方法：

    (1)统一设置一个背景图

img{
	display: block;
	width: 100px;
	height:100px;
	background: url(xxx.png) no-repeat 0 0;	
	background-size: 20px 20px;	    
	margin: 40px auto 0;
}

    (2)直接在img标签里添加onerror事件进行控制

<img src="" onerror="javascript:this.src='xxx.jpg';">

        注意点：

                ①这里的图片要尽可能小，如果过大还会存在加载失败的可能；

                ②当'xxx.jpg'图片不存在时还会出现加载失败；

                ②当加载失败时会再次执行onerror，再失败再执行，会一直执行陷入循环之中。

    (3)可以写一个函数，让函数只执行一次（执行一次把它置为null即可），不让其进入循环之中（推荐使用）

<img src="" onerror="noImg();"/>

<script type="text/javascript">
	function noImg(){ 
		var img=event.srcElement; 
		img.src="../on.png"; 
		img.onerror=null; 
	} 
</script>

        此法甚好！

    (4)onerror相当于用js事件控制,所以在各个浏览器都能兼容