JavaScript开发——加载在线图片完整功能实现方法（正在加载-加载成功-加载失败）

在开发中，我们加载一些不是本地的图片的时候，在加载的时候我们需要显示等待动画，加载完成等待动画消失，如果加载失败则显示加载失败的提示。

之前有篇是CSS——实现图片等比例正方形显示，宫格排列http://blog.csdn.net/yu17310133443/article/details/72674390

这个就根据上次的布局样式来写CSS样式的代码参考上面地址里面的样式

HTML页面我们默认放的是加载动画的图片，要加载的图片放在data里面：

<ul class="figure-list">  
  <li>  
    <figure class="figure" data="1.png" style="background-image:url('http://www.86y.org/images/failed.png')">  
      <a href="#"></a>  
    </figure>  
  </li>  
  <li>  
    <figure class="figure" data="2.png" style="background-image:url('http://www.86y.org/images/failed.png')">  
      <a href="#"></a>  
    </figure>  
  </li> 
  <li>  
    <figure class="figure" data="3.png" style="background-image:url('http://www.86y.org/images/failed.png')">  
      <a href="#"></a>  
    </figure>  
  </li> 
</ul>  

JS中：

//判断浏览器  
var Browser=new Object();  
Browser.userAgent=window.navigator.userAgent.toLowerCase();  
Browser.ie=/msie/.test(Browser.userAgent);  
Browser.Moz=/gecko/.test(Browser.userAgent);  
  
//判断是否加载完成  
function Imagess(url,imgid,checkimg){      
    var val=url;  
    var img=new Image();  
    if(Browser.ie){  
        img.onreadystatechange =function(){    
            if(img.readyState=="complete"||img.readyState=="loaded"){  
                checkimg(val,imgid);  
            }  
        }          
    }else{  
        img.οnlοad=function(){  
            if(img.complete==true){  
                checkimg(val,imgid);  
            }  
        }          
    }     
    //如果因为网络或图片的原因发生异常，则显示该图片  
    img.οnerrοr=function(){
    	document.getElementById(imgid).style.backgroundImage="url('http://www.86y.org/images/failed.png')";
    }  
    img.src=val;  
}  
  
//显示图片  
function checkimg(obj,imgid){  
	document.getElementById(imgid).style.backgroundImage="url("+obj+")";  
}  
//初始化需要显示的图片，并且指定显示的位置  
window.οnlοad=function(){  
	var imglist=$(".figure");  
	for(i=0;i<imglist.length;i++){  
	    imglist[i].id="img0"+i;  
	    Imagess(imglist[i].getAttribute("data"),imglist[i].id,checkimg);  
	}   
}