这个是真实的数据加载显示的进度条
不是单纯的当一个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