预加载时的进度条

这个是真实的数据加载显示的进度条

不是单纯的当一个gif的loading图片

使用的是微信提供的资源预加载方法

http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93

结合实例

首先引入

<script src="http://cdnjs.gtimg.com/cdnjs/libs/wxmoment/0.0.2/wxmoment.min.js"></script>

<!-- 加载 -->
<div class="loading">
   <div class="loading_inner">
      <div class="loading_img"></div>
      <div class="loading_y">
         <i class="t_l"></i>
         <i class="t_a"></i>
         <i class="t_n"></i>
         <i class="t_e"></i>
         <i class="t_i"></i>
         <i class="t_g"></i>
         <i class="t_e2"></i>
         <i class="c_meets"></i>
         <i class="b_f"></i>
         <i class="b_a"></i>
         <i class="b_s"></i>
         <i class="b_h"></i>
         <i class="b_i"></i>
         <i class="b_o"></i>
         <i class="b_n"></i>
      </div>
      <span>0%</span>
   </div>
</div>

var basePath = "";
var loader = new WxMoment.Loader();
//声明资源文件列表
var fileList = ['img/bg.jpg','img/loading_n.png', 'img/loading_y.png', 'img/img1.png',  'img/img3.png', 'img/img4.png', 'img/img5.png', 'img/img6.png', 'img/img7.png','img/img10.png', 'img/img11.png', 'img/img12.png', 'img/img13.png', 'img/img14.png','img/img15.png','img/img16.png','img/img17.png', 'img/img18.png','img/img19.png','img/icon.png','img/rule.jpg','img/a/1.jpg','img/a/2.jpg','img/a/3.jpg','img/a/4.jpg','img/a/5.jpg','img/a/6.jpg','img/a/7.jpg','img/a/8.jpg','img/a/9.jpg','img/a/10.jpg','img/a/11.jpg','img/a/12.jpg','img/a/13.jpg','img/a/14.jpg','img/a/15.jpg','img/a/16.jpg','img/a/17.jpg','img/a/18.jpg','img/a/19.jpg','img/a/20.jpg','img/a/21.jpg','img/a/22.jpg','img/a/23.jpg','img/a/24.jpg','img/a/25.jpg','img/darling1.png','img/darling2.png','img/darling3.png','img/darling4.png','img/darling5.png','img/img29.png','img/img30.png',];
for (var i = 0; i < fileList.length; i++) {
   loader.addImage(basePath + fileList[i]);
}
//进度监听
loader.addProgressListener(function (e) {
   var percent = Math.round((e.completedCount / e.totalCount) * 100);
   $(".loading_inner span").text(percent+'%');
   $(".loading_y").css({width:percent+'%'});
   //console.log("当前加载了", percent, "%");
   //在这里做 Loading 页面中百分比的显示
});
//加载完成
loader.addCompletionListener(function () {
   //可以在这里隐藏 Loading 页面开始进入主内容页面

//console.log("加载完成");
      setTimeout(function(){        
	$(".loading_img").hide();
   	$(".loading").addClass("hide");
      },10);
//启动加载
loader.start();		

效果如下图

作品网址http://htmlspace.doorder.com/laneige/index.html