网站顶部显示预加载进度条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模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
随机推荐
- 多种方法爬取猫眼电影Top100排行榜,保存到csv文件,下载封面图
参考链接: https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/83663400 https://www.makcyun.top/web_sc ...
- C# 通过反射为一个对象赋值
/// <summary> /// 反射赋值 /// </summary> public class ObjectReflection { publ ...
- js获取数组中任意一项
1.获取数组任一项 在一些实际应用场景中,会要求实现一个随机的需求,随机获取某一项,来展示出来,都知道要通过javaScript的Math.random()方法来实现,这里我在Array的原型上添加了 ...
- bzoj 2654 && bzoj 3675 总结
手动博客搬家: 本文发表于20180929 15:18:55, 原地址https://blog.csdn.net/suncongbo/article/details/82897992 最近做到了两道( ...
- 【hihocoder 1476】矩形计数
[题目链接]:http://hihocoder.com/problemset/problem/1476 [题意] [题解] 首先不考虑黑格子,计算出一共有多少个矩形: 枚举矩形的大小r×c,这样大小的 ...
- 命令行下配置Windows 2003防火墙
命令:netsh firewall 参数: ? // 显示命令列表 add // 添加防火墙配置 delete // 删除防火墙配置 dump // 显示一个配置脚本 help // 显示命令列表 r ...
- UVA 11383 - Golden Tiger Claw(二分图完美匹配扩展)
UVA 11383 - Golden Tiger Claw 题目链接 题意:给定每列和每行的和,给定一个矩阵,要求每一个格子(x, y)的值小于row(i) + col(j),求一种方案,而且全部行列 ...
- 10317 Fans of Footbal Teams
10317 Fans of Footbal Teams 时间限制:1000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC Description ...
- mysql选择上一条、下一条数据记录,排序上移、下移、置顶
1.功能须要 完毕列表排序上移,下移,置顶功能.效果例如以下图所看到的: 2设置思路 设置一个rank为之间戳,通过选择上移,就是将本记录与上一条记录rank值交换,下移就是将本条记录与下一条记录ra ...
- 利用GDAL实现影像的几何校正
一.概述 遥感影像和地理坐标进行关联的方式一般有好几种,一种是直接给出了仿射变换系数,即6个參数,左上角地理坐标,纵横方向上的分辨率,以及旋转系数.在这样的情况下,求出某一像素点的地理坐标非常easy ...