查看效果点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. thinkphp 去除空格

  2. 【洛谷P4556】 雨天的尾巴

    题面 题解 线段树合并 我们看到这道题目首先可以想到树上差分,然后\(dfs\)合并 发现题目让我们求的东西很好用线段树维护 于是可以想到线段树合并 全世界只有我写指针版动态开点线段树(大雾 如果你要 ...

  3. Java构造方法与析构方法实例剖析

    Java构造方法 类有一个特殊的成员方法叫作构造方法,它的作用是创建对象并初始化成员变量.在创建对象时,会自动调用类的构造方法. 构造方法定义规则:Java 中的构造方法必须与该类具有相同的名字,并且 ...

  4. macOS中启动Tomcat提示Cannot find ./catalina.sh

    首先查看Tomcat目录下是否存在catalina.sh,如果文件不存在,文件丢失,最好的方式是重装Tomcat Tomcat官网:http://tomcat.apache.org/ 如果文件存在,那 ...

  5. 在django中使用django_debug_toolbar

    一.概述 django_debug_toolbar 是django的第三方工具包,给django扩展了调试功能. 包括查看执行的sql语句,db查询次数,request,headers,调试概览等. ...

  6. 785. Is Graph Bipartite?

    Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is bipart ...

  7. Bellman-ford 模板

    #include<bits/stdc++.h> const int inf=0x3f3f3f3f; ; struct edge{ int u,v;//两个点 int w; //权值 Edg ...

  8. 关于购买Redis服务器:腾讯云、阿里云还是华为云?

    个人分类: redis使用 编辑 新年伊始,很多商家都开始进行新年产品大促销,在分布是缓存Redis领域,几家大公司也是打得如火如荼,各有千秋啊. 现在市场上比较有口碑的商家有腾讯云.阿里云.华为云三 ...

  9. RHCE6.0上午的考试一键完成

    #!/sbin/bash # #initial envirment #variable define IPADDR=192.168.0.12 NETMASK=255.255.255.0 HOSTNAM ...

  10. Composer指南

    安装 windows中安装Composer 一般来说,windows下安装composer有两种办法,一种是直接下载并运行Composer-Setup.exe,这种方法在中国似乎很难完成安装.另一种就 ...