這個是真實的資料載入顯示的進度條

不是單純的當一個gif的loading圖片

使用的是微信提供的資源預載入方法

結合例項

首先引入

<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");

//啟動載入
loader.start();		

效果如下圖