网站顶部显示预加载进度条preload.js
网站加载的速度快的话,不会显示进度条加载时候的样式。
支持性主流浏览器都支持,ie浏览器需要9以上9也支持。
使用方法
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/preload.js"></script>
<script type="text/javascript">
$.QianLoad.PageLoading({
sleep:
});
</script>
/*
*/
$.QianLoad = {
PageLoading: function(options) {
var defaults = {
delayTime: 500, //页面加载完成后,加载进度条淡出速度
sleep: 0, //设置挂起,等于0时则无需挂起
css: '<style>*{margin:0;}.load-wrap{width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff}#pre-load{position:fixed;top:0;height:2px;background:#2085c5;transition:opacity .5s linear}#pre-load span{position:absolute;width:150px;height:2px;-webkit-border-radius:100%;-webkit-box-shadow:#2085c5 1px 0 6px 1px;opacity:1;right:-10px;-webkit-animation:pulse 2s ease-out 0s infinite}@-webkit-keyframes pulse{30%{opacity:.6}60%{opacity:0}to{opacity:.6}}</style>'
//进度条样式位置可以自己修改
}
var options = $.extend(defaults, options);
//在页面未加载完毕之前显示的loading Html自定义内容
$('head').append(defaults.css);
var _LoadingHtml = '<div class="load-wrap" style="width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff"><div id="pre-load">' + '<span></span>' + '</div></div>';
//呈现loading效果
$("body").append(_LoadingHtml);
//监听页面加载状态
document.onreadystatechange = PageLoaded;
function PageLoaded() {
var loadingMask = $('#pre-load');
$({
property: 0
}).animate({
property: 98
}, {
duration: 3000,
step: function() {
var percentage = Math.round(this.property);
loadingMask.css('width', percentage + "%");
//页面加载后执行
if (document.readyState == "complete") {
loadingMask.css('width', 100 + "%");
setTimeout(function() {
loadingMask.animate({
"opacity": 0
},
options.delayTime,
function() {
$(this).remove();
$(".load-wrap").remove();
console.log('Loading has been successful');
});
},
options.sleep);
}
}
});
}
}
}
网站顶部显示预加载进度条preload.js的更多相关文章
- flex自定义preloader预加载进度条
flex默认的preloader已经很不错了,可是有时候还是需要自定义的. 需要在要出现自定义预加载的程序的<mx:Application>标签里加入preloader="& ...
- 插件二之页面加载进度条pace.js
关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
- react封装简单的浏览器顶部加载进度条全局组件
在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
- 混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条
混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
随机推荐
- Redis 应用场景【商品拼团抢购】
使用到 redis-list llen 命令:获取列表的长度,如果列表key不存在那么也是返回0,如果给的key不是一个列表类型会返回一个错误 lpush命令:将值插入到列表头部,如果 key 不存在 ...
- Golang - 面对"对象"
目录 Golang - 面对"对象" 1. 简介 2. 匿名字段 3. 方法 4. 包和封装 5. 接口 4. 包和封装 5. 接口 Golang - 面对"对象&quo ...
- numpy中sum(axis=0)和axis=1的计算原理
看起来挺简单的样子,但是在给sum函数中加入参数.sum(a,axis=0)或者是.sum(axis=1) 就有点不解了 在我实验以后发现 我们平时用的sum应该是默认的axis=0 就是普通的相加 ...
- 【JS】垃圾回收和块级作用域
垃圾回收: JavaScript中,开发者不必关心内存分配和回收的问题.这和Java语言相似.有一个垃圾自己主动回收机制.那么JavaScript内部到底是如何回收垃圾的呢? 使用标记回收法:就是说. ...
- POJ 3335
/*半平面交求核心的增量法: 假设前N-1个半平面交,对于第N个半平面,只需用它来交前N-1个平面交出的多边形. 算法开始时,调整点的方向为顺时针方向,对于是否为顺时针,只需求出其面积,若为正,必为逆 ...
- XTU OJ 1207 Welcome to XTCPC (字符串签到题)
Problem Description Welcome to XTCPC! XTCPC start today, you are going to choose a slogan to celebra ...
- Android最佳实践之性能 - 多线程
在单独线程执行代码 參考地址:http://developer.android.com/training/multiple-threads/define-runnable.html Runnable对 ...
- SRM 622 D2L3: Subsets, math, backtrack
题目:http://community.topcoder.com/stat?c=problem_statement&pm=10554&rd=15855 符合条件的集中非1的元素个数是非 ...
- rabbitmq 入门基础(一)
第一章:Rabbitmq简单介绍 简单介绍: Rabbitmq是一个消息中间件.主要用于消息的转发和接收.假设把rabbitmq比作邮局:仅仅要你将信件投递到邮箱,你就能够确信邮递员将能够把你的信件递 ...
- sql系列(基础篇)-前言 课前补充知识
前言 课前补充知识 Number(p,s) Number(p,s):数字类型,p 表示数字的有效长度(从数字的左边第 1 位不为 0 的開始算起,直到最右边的长度.取值范围 0~38 位),s 表示数 ...