插件-监控页面加载之loading
查看效果点https://icedjuice.github.io/plug-in/loading/loading.html
简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是通过模仿监控加载实现效果,简单易用且基本不消耗性能,十分方便。
1. html
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
- <script src="js/Loading.jq.js" type="text/javascript" charset="utf-8"></script>
2.css
- #loadingPage{
- width: 500px;
- margin: 100px auto;
- }
- .loadingWrap{
- width: 500px;
- height: 10px;
- border: 2px solid #000;
- border-radius: 10px;
- position: relative;
- }
- .loadingBarbox{
- width: 98%;
- height: 8px;
- position: absolute;
- left: 1%;top: 1px;
- border-radius:8px;
- overflow: hidden;
- }
- #loadingBar{
- display: block;
- height: 100%;
- position: absolute;
- left:;top:;
- background-color: #000;
- }
- #loadingNum{
- position: absolute;
- left:;top: 120%;
- display: block;
- font-size: 20px;
- color: #000;
- width: 100%;
- text-align: center;
- }
3.js
- function Loading (callBack){
- var self = this;
- this.Dom = '<div id="loadingPage"><div class="loadingWrap"><div class="loadingBarbox"><div id="loadingBar"></div></div><span id="loadingNum"></span></div></div>'
- $('body').append(self.Dom);
- this.interval = null;
- this.page = $('#loadingPage');
- this.bar = $('#loadingBar');
- this.numbox = $('#loadingNum');
- this.callBack = callBack || function(){return false;};
- this.progress = 0;
- this.run = function(timing,num,way){
- clearInterval(self.interval);
- self.interval = setInterval(function(){
- self.progress += num;
- if(self.progress>=100) self.progress = 100;
- self.bar.css('width' , self.progress + "%" );
- self.numbox.text( self.progress + '%' );
- if(self.progress == 90 && !way){self.run(500,1,false);}
- if(self.progress == 99 && !way){clearInterval(self.interval);}
- if(self.progress == 100){
- clearInterval(self.interval);
- if(!!self.callBack){self.callBack();}
- setTimeout(function (){
- self.page.animate({'opacity':'0'},400,function (){$(this).remove();});
- },400)
- }
- },timing);
- }
- this.init = function (timing,num,way){this.run(timing,num,way);};
- $(window).on('load',function(){self.run(13,5,true)});
- }
4.使用方法
- <script type="text/javascript">
- $(document).ready(function (){
- new Loading(function(){
- console.log('loaded')
- }).init(50,1,false);
- })
- </script>
5.效果
想要什么效果只需要修改相应的css就可以实现不同的加载效果啦!
(完)
插件-监控页面加载之loading的更多相关文章
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
- 页面加载时loading效果
页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 页面加载loading动画
关于页面加载的loading动画,能度娘到的大部分都是通过定时器+蒙层实现的,虽然表面上实现了动画效果,实际上动化进程和页面加载进程是没有什么关系的,只是设置几秒钟之后关闭蒙层,但假如页面须要加载的元 ...
- css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- 转载:页面加载swf插件:swfobject
转自:http://www.cnblogs.com/analyzer/articles/1299592.html 我一直都在用SWFObject 插入flash,好处多多,代码简洁,不会出现微软的“单 ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 在页面加载前先出现加载loading,页面加载完成之后再显示页面
在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...
随机推荐
- thinkphp 去除空格
- 【洛谷P4556】 雨天的尾巴
题面 题解 线段树合并 我们看到这道题目首先可以想到树上差分,然后\(dfs\)合并 发现题目让我们求的东西很好用线段树维护 于是可以想到线段树合并 全世界只有我写指针版动态开点线段树(大雾 如果你要 ...
- Java构造方法与析构方法实例剖析
Java构造方法 类有一个特殊的成员方法叫作构造方法,它的作用是创建对象并初始化成员变量.在创建对象时,会自动调用类的构造方法. 构造方法定义规则:Java 中的构造方法必须与该类具有相同的名字,并且 ...
- macOS中启动Tomcat提示Cannot find ./catalina.sh
首先查看Tomcat目录下是否存在catalina.sh,如果文件不存在,文件丢失,最好的方式是重装Tomcat Tomcat官网:http://tomcat.apache.org/ 如果文件存在,那 ...
- 在django中使用django_debug_toolbar
一.概述 django_debug_toolbar 是django的第三方工具包,给django扩展了调试功能. 包括查看执行的sql语句,db查询次数,request,headers,调试概览等. ...
- 785. Is Graph Bipartite?
Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is bipart ...
- Bellman-ford 模板
#include<bits/stdc++.h> const int inf=0x3f3f3f3f; ; struct edge{ int u,v;//两个点 int w; //权值 Edg ...
- 关于购买Redis服务器:腾讯云、阿里云还是华为云?
个人分类: redis使用 编辑 新年伊始,很多商家都开始进行新年产品大促销,在分布是缓存Redis领域,几家大公司也是打得如火如荼,各有千秋啊. 现在市场上比较有口碑的商家有腾讯云.阿里云.华为云三 ...
- RHCE6.0上午的考试一键完成
#!/sbin/bash # #initial envirment #variable define IPADDR=192.168.0.12 NETMASK=255.255.255.0 HOSTNAM ...
- Composer指南
安装 windows中安装Composer 一般来说,windows下安装composer有两种办法,一种是直接下载并运行Composer-Setup.exe,这种方法在中国似乎很难完成安装.另一种就 ...