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.onload=function(){
if(img.complete==true){
checkimg(val,imgid);
}
}
}
//如果因为网络或图片的原因发生异常，则显示该图片
img.onerror=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.onload=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);
}
}