img标签使用加载图片和错误时图片

在做web项目时，常会用到图片标签，如果只使用一个src来显示就太单调而且难看，在加载图片时如果用户网速慢就一片空白，等了半天发现没有图片，直接就显示一个红色的X，所以就需要用到一个加载时的图片来告诉用户图片正在加载，请耐心等待，如果不幸图片没有或者加载错误也给出一个精美图片来告诉用户。

以下为代码片断：

var err_url = "错误时要显示图片路径"; //定义出错后显示的图片
		var load_url = "加载时显示图片路径";
		var img = document.getElementsByTagName("img");
		for ( var i = 0; i < img.length; i++) {
			var att = img[i].getAttribute("data");
			if (att != "" && att != null) { //没有定义data属性的图片我们不检查            
				(function(a, b) {
					img[a].src=load_url;
					var pic = new Image();
					pic.src = b;
					pic.onload = function() {
						pic.onload = null;
						img[a].src = b;
					};
					pic.onerror = function() {
						pic.onerror = null;
						img[a].src = err_url;
					}
				})(i, att)
			}
		}

把以上代码放在一个公共的JS里可以避免重复代码，在项目中平时写在src里面要显示的图片路径这个时候就必须写在data属性里。

<img data="真正要显示的图片路径" />