预加载时的进度条

快来打我* 2022-09-24 10:17 200阅读 0赞

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

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

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

[http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93][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][http_htmlspace.doorder.com_laneige_index.html]

![Center][]

[http_ad.weixin.qq.com_learn_2-3-3--_E9_80_9A_E7_94_A8_E5_BA_93]: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93
[http_htmlspace.doorder.com_laneige_index.html]: http://htmlspace.doorder.com/laneige/index.html
[Center]: /images/20220719/5db212e4fd494c21ac071de6183d8657.png

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 nprogress页面加载进度条

入口文件,main.js引入 nprogress import App from './App' import VueRouter from 'vue-rou

ゞ浴缸里的玫瑰/ 2023年10月11日 14:03/ 0 赞/ 64 阅读

相关 nprogress页面加载进度条

安装 npm install --save nprogress 使用 NProgress.start(); // 开始 NProgr

蔚落/ 2022年11月26日 01:53/ 0 赞/ 225 阅读

相关预加载时的进度条

这个是真实的数据加载显示的进度条不是单纯的当一个gif的loading图片使用的是微信提供的资源预加载方法 [http://ad.weixin.qq.com/lear

快来打我*/ 2022年09月24日 10:17/ 0 赞/ 201 阅读

相关常用的网页加载进度条之【实时获取加载数据的进度条】

之前我们做的进度条都是动画，没有获取实时数据。有些网站是从0到100%逐渐过渡的，也能看到相应数字的变化，那么用户在等待时候看到数字心里还是有个底的，等到了100%的时候就可以

た入场券/ 2022年06月08日 14:29/ 0 赞/ 470 阅读

相关常用的网页加载进度条之【制作进度条】

一、课程介绍随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢得多，如果图片或脚本没有完全载入，用户在操作中

川长思鸟来/ 2022年06月08日 09:05/ 0 赞/ 796 阅读

相关常用的网页加载进度条

关于进度条的图片，有几个专门的网站可以下载 [https://icons8.com/preloaders/][https_icons8.com_preloaders]，

爱被打了一巴掌/ 2022年05月10日 22:04/ 0 赞/ 473 阅读

相关 unity进度条加载

首先创建一个unity自带的UI——Slider，并在其下面再添加一个Text ![20190317171335629.png][] 在其下面添加脚本 using

超、凢脫俗/ 2022年04月23日 15:00/ 0 赞/ 364 阅读

相关 python 简单文本进度条程序进度条加载进度条单行刷新

利用time库来替代某个程序的进行过程，做实例，思路是，简单打印出来程序进度单行刷新关键是\\r， python默认是print后换行，所以加一个\\r是光标

朴灿烈づ我的快乐病毒、/ 2022年03月18日 05:50/ 0 赞/ 444 阅读

相关 swift 加载网页添加进度条

/// 进度条：只在活动页展示 fileprivate lazy var progressView:UIProgressView = UIProg

你的名字/ 2021年12月22日 07:39/ 0 赞/ 339 阅读

相关网页加载进度条

通过加载状态事件制作进度条主页面未完全加载前使用加载页面，加载完成后将加载页面隐藏 - document.onreadystatechange 页面加载状态改变时的事件...

你的名字/ 2021年05月03日 09:51/ 0 赞/ 742 阅读