查看效果点https://icedjuice.github.io/plug-in/loading/loading.html

简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是通过模仿监控加载实现效果,简单易用且基本不消耗性能,十分方便。

1. html

  1. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  2. <script src="js/Loading.jq.js" type="text/javascript" charset="utf-8"></script>

2.css

  1. #loadingPage{
  2. width: 500px;
  3. margin: 100px auto;
  4. }
  5. .loadingWrap{
  6. width: 500px;
  7. height: 10px;
  8. border: 2px solid #000;
  9. border-radius: 10px;
  10. position: relative;
  11. }
  12. .loadingBarbox{
  13. width: 98%;
  14. height: 8px;
  15. position: absolute;
  16. left: 1%;top: 1px;
  17. border-radius:8px;
  18. overflow: hidden;
  19.  
  20. }
  21. #loadingBar{
  22. display: block;
  23. height: 100%;
  24. position: absolute;
  25. left:;top:;
  26. background-color: #000;
  27. }
  28. #loadingNum{
  29. position: absolute;
  30. left:;top: 120%;
  31. display: block;
  32. font-size: 20px;
  33. color: #000;
  34. width: 100%;
  35. text-align: center;
  36. }

3.js

  1. function Loading (callBack){
  2.  
  3. var self = this;
  4. this.Dom = '<div id="loadingPage"><div class="loadingWrap"><div class="loadingBarbox"><div id="loadingBar"></div></div><span id="loadingNum"></span></div></div>'
  5. $('body').append(self.Dom);
  6. this.interval = null;
  7. this.page = $('#loadingPage');
  8. this.bar = $('#loadingBar');
  9. this.numbox = $('#loadingNum');
  10. this.callBack = callBack || function(){return false;};
  11. this.progress = 0;
  12.  
  13. this.run = function(timing,num,way){
  14. clearInterval(self.interval);
  15. self.interval = setInterval(function(){
  16. self.progress += num;
  17. if(self.progress>=100) self.progress = 100;
  18. self.bar.css('width' , self.progress + "%" );
  19. self.numbox.text( self.progress + '%' );
  20. if(self.progress == 90 && !way){self.run(500,1,false);}
  21. if(self.progress == 99 && !way){clearInterval(self.interval);}
  22. if(self.progress == 100){
  23. clearInterval(self.interval);
  24. if(!!self.callBack){self.callBack();}
  25. setTimeout(function (){
  26. self.page.animate({'opacity':'0'},400,function (){$(this).remove();});
  27. },400)
  28. }
  29. },timing);
  30. }
  31. this.init = function (timing,num,way){this.run(timing,num,way);};
  32.  
  33. $(window).on('load',function(){self.run(13,5,true)});
  34. }

4.使用方法

  1. <script type="text/javascript">
  2.  
  3. $(document).ready(function (){
  4.  
  5. new Loading(function(){
  6.  
  7.        console.log('loaded')
  8.  
  9.      }).init(50,1,false);
  10. })
  11.  
  12. </script>

5.效果

想要什么效果只需要修改相应的css就可以实现不同的加载效果啦!

(完)

插件-监控页面加载之loading的更多相关文章

  1. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  2. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. 页面加载loading动画

    关于页面加载的loading动画,能度娘到的大部分都是通过定时器+蒙层实现的,虽然表面上实现了动画效果,实际上动化进程和页面加载进程是没有什么关系的,只是设置几秒钟之后关闭蒙层,但假如页面须要加载的元 ...

  4. css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  5. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  6. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

  7. 转载:页面加载swf插件:swfobject

    转自:http://www.cnblogs.com/analyzer/articles/1299592.html 我一直都在用SWFObject 插入flash,好处多多,代码简洁,不会出现微软的“单 ...

  8. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  9. 在页面加载前先出现加载loading,页面加载完成之后再显示页面

    在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...

随机推荐

  1. Yii 2.0 使用验证码

    Yii2.0 提供了验证码组件.调用起来比较方便.以登录页面添加验证码为例. 1. 模型中添加字段和验证规则. common\models\LoginForm 添加如下代码 public $captc ...

  2. MSP430FR6972的串口波特率设置代码

    1. 本次使用ACLK,就是辅助时钟(32.768KHZ)作为串口的时钟源,那么使用波特率9600的时候,分频系数=32768/9600=3.41,所以是有小数位的,设置代码如下 UCA0CTLW0 ...

  3. SQL基本数据类型等

    bit   类似C#中的bool类型   true/false int   整型 nvarchar  字符串类型 float   小数型 decimal(,) 小数型  (限制小数位数) dateti ...

  4. Maven学习(十二)-----Maven POM

    Maven POM POM代表项目对象模型.它是 Maven 中工作的基本单位,这是一个 XML 文件.它始终保存在该项目基本目录中的 pom.xml 文件.POM 包含的项目是使用 Maven 来构 ...

  5. 用Micro:bit做剪刀、石头、布游戏

    剪刀.石头.布游戏大家都玩过,今天我们用Micro:bit建一个剪刀.石头.布游戏! 第一步,起始 当你摇动它时,我们希望the micro:bit选择剪刀.石头.布.尝试创建一个on shake b ...

  6. Jmeter性能测试使用记录

    使用背景 由于最近公司要求对一批接口做性能测试,所以重拾了一些对于Jmeter的使用,现将部分过程做记录,以便以后回溯. 接口参数化 数据参数文件使用了excel保存出的csv文件,dat格式的文件也 ...

  7. Vue2 v-bind:href 中如何使用过滤器

    <a class="topic_title" v-bind:href="info.id|getTitleHref" v-bind:title=" ...

  8. libCurl 初步认识 - cur easy

    cur easy接口简洁明了,主接口4个,辅接口5个. 主接口 初始化 + 配参数 + 执行 + 销毁 初始化 CURL* curl_easy_init() 获得CURL句柄,返回值需要判空. 配参数 ...

  9. 最强NLP模型-BERT

    简介: BERT,全称Bidirectional Encoder Representations from Transformers,是一个预训练的语言模型,可以通过它得到文本表示,然后用于下游任务, ...

  10. python实现lower_bound和upper_bound

    由于对于二分法一直都不是很熟悉,这里就用C++中的lower_bound和upper_bound练练手.这里用python实现 lower_bound和upper_bound本质上用的就是二分法,lo ...