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

来源：互联网发布：网址翻译软件 ios 编辑：程序博客网时间：2024/04/27 23:32

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

之前有篇是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);  }   }

阅读全文

0 0