【www.gdgbn.com--js教程】

提供二款图片预加载进度条效果代码，可以对网站图片加载过慢时进行提供，这样可以增加用户体验哦，我们利用了一款js与mootools实例代码。

<script>
var l=0;
var imgs;
var sum=0;
function chk(){
  document.getelementbyid("aa").innertext=""+((sum-l)*100/sum)+"%"
  l--;
  if (l==0){
    for (var i=0;i       imgs[i].style.display="";
    }
  }
}
</script>

css教程/www.111cn.net/wall1.jpg"/>

<script>
imgs=document.getelementsbytagname("img");
sum=l=imgs.length;
for (var i=0;i   imgs[i].onload=chk;
  imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
  imgs[i].style.display="none";
}
</script>

基于mootools 图片预加载进度条

window.addevent("domready", function() {
 /* progress bar */
 var progressbar = new dwprogressbar({
  container: $("progress-bar"),
  startpercentage: 0,
  speed:750,
  boxid: "box",
  percentageid: "perc",
  displayid: "text",
  displaytext: true
 });
 
 /* preloading */
 var images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"];
    //asset.images 预加载一组图片文件
 var loader = new asset.images(images, {
        //当所有图片加载完成后触发
  onprogress: function(counter,index) {
   progressbar.set((counter + 1) * (100 / images.length));
  },
        //每加载完一个图片后触发一次
  oncomplete: function() {
   images.each(function(im) {
    new element("img",{ src:im, width:200, style:"width:200px;margin:20px 20px 20px 0;" }).inject($("images-holder"));
   });
  }
 });
});

本文来源：http://www.gdgbn.com/wangyezhizuo/27859/