在做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="真正要显示的图片路径" />