插件-监控页面加载之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 ...
随机推荐
- Yii 2.0 使用验证码
Yii2.0 提供了验证码组件.调用起来比较方便.以登录页面添加验证码为例. 1. 模型中添加字段和验证规则. common\models\LoginForm 添加如下代码 public $captc ...
- MSP430FR6972的串口波特率设置代码
1. 本次使用ACLK,就是辅助时钟(32.768KHZ)作为串口的时钟源,那么使用波特率9600的时候,分频系数=32768/9600=3.41,所以是有小数位的,设置代码如下 UCA0CTLW0 ...
- SQL基本数据类型等
bit 类似C#中的bool类型 true/false int 整型 nvarchar 字符串类型 float 小数型 decimal(,) 小数型 (限制小数位数) dateti ...
- Maven学习(十二)-----Maven POM
Maven POM POM代表项目对象模型.它是 Maven 中工作的基本单位,这是一个 XML 文件.它始终保存在该项目基本目录中的 pom.xml 文件.POM 包含的项目是使用 Maven 来构 ...
- 用Micro:bit做剪刀、石头、布游戏
剪刀.石头.布游戏大家都玩过,今天我们用Micro:bit建一个剪刀.石头.布游戏! 第一步,起始 当你摇动它时,我们希望the micro:bit选择剪刀.石头.布.尝试创建一个on shake b ...
- Jmeter性能测试使用记录
使用背景 由于最近公司要求对一批接口做性能测试,所以重拾了一些对于Jmeter的使用,现将部分过程做记录,以便以后回溯. 接口参数化 数据参数文件使用了excel保存出的csv文件,dat格式的文件也 ...
- Vue2 v-bind:href 中如何使用过滤器
<a class="topic_title" v-bind:href="info.id|getTitleHref" v-bind:title=" ...
- libCurl 初步认识 - cur easy
cur easy接口简洁明了,主接口4个,辅接口5个. 主接口 初始化 + 配参数 + 执行 + 销毁 初始化 CURL* curl_easy_init() 获得CURL句柄,返回值需要判空. 配参数 ...
- 最强NLP模型-BERT
简介: BERT,全称Bidirectional Encoder Representations from Transformers,是一个预训练的语言模型,可以通过它得到文本表示,然后用于下游任务, ...
- python实现lower_bound和upper_bound
由于对于二分法一直都不是很熟悉,这里就用C++中的lower_bound和upper_bound练练手.这里用python实现 lower_bound和upper_bound本质上用的就是二分法,lo ...