页面loading提示效果
前言：
现在做页面一般为了提示友好点，一般会做个页面正在加载的loading提示效果，当页面加载完毕后再显示内容！这个时候就需要监控页面的资源加载的情况，有时候这并不好做，因为页面涉及图片，视频，已经js等等资源。所以我们在做loading的时候可以采用模拟的情况，适当给页面加载一定时间的loading提示！
这里不多说，先加上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
<title>loading</title>
</head>
<body>
fgdfgfdgdfgdfgdfgdfgf
</body>
</html>
<script>
/*
autor : shizhouyu
方法：
loading(time,loadimg)
参数说明：
time loading加载几时关闭，不传或者传为0视为不关闭
loadimg：动态转动的图片，不传则只显示文字
方法：
removeLoading()
删除正在运行的loading层
*/
;(function($){
function isIE(){//判断IE
if(window.navigator.userAgent.toLowerCase().indexOf('msie') >= 1){
return true;
}
else{
return false;
}
}
if(!isIE()){
HTMLElement.prototype.__defineGetter__('innerText', function(){//定义方法，兼容火狐方法textContent
var str = '';
var childS = this.childNodes;
for(var i = 0; i< childS.length; i++) {
if(childS[i].nodeType == 1){
str += childS[i].tagName == 'BR' ? '\n' : childS[i].textContent;//处理换行
}
else if(childS[i].nodeType == 3)
str += childS[i].nodeValue;
}
return str;
}
);
HTMLElement.prototype.__defineSetter__('innerText', function(sText){
this.textContent = sText;
}
);
}
$.loading = function(time,loadimg){
if(arguments.length == 0){
time = 0;loadimg='';//处理参数
}
if(arguments.length == 1){
time = arguments[0];loadimg='';
}
var div = document.createElement('div');
var smallD = document.createElement('div');
div.style.height = '100%';
div.style.width = '100%';
div.style.zIndex = 99999;
div.style.position = 'fixed';
div.style.backgroundColor = '#fff';
div.style.top = 0;
div.style.left = 0;
div.id = 'loading_szy_ver1';
smallD.style.height = '50px';
smallD.style.width = '190px';
smallD.style.zIndex = 999999;
smallD.style.position = 'absolute';
smallD.style.borderWidth = '1px';
smallD.style.borderStyle = 'solid';
smallD.style.borderColor = '#216DCC';
smallD.style.top = '50%';
smallD.style.left = '50%';
smallD.style.marginTop = '-25px';
smallD.style.marginLeft = '-95px';
var img = '';
var temp = '';
if(loadimg != ''){
img = '<img src = "'+ loadimg +'" width="35" height="35" style="position:absolute;top:7px;left:7px;"/>';
temp = '<p style="position:absolute;top:17px;left:50px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
}else{
temp = '<p style="position:absolute;top:17px;left:20px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
}
smallD.innerHTML = img + temp;
div.appendChild(smallD);
document.body.appendChild(div);
var flag = 1;
var timep = setInterval(function(){
var p = smallD.getElementsByTagName('p')[0];
if(flag == 1){
p.innerText = '页面加载中，请稍后..';flag = 2;
}else if(flag == 2){
p.innerText = '页面加载中，请稍后...';flag = 3;
}else if(flag == 3){
p.innerText = '页面加载中，请稍后....';flag = 4;
}else{
p.innerText = '页面加载中，请稍后.';flag = 1;
}
},300);
if(!!time){
var timer = setTimeout(function(){
if(div && div.parentNode && div.tagName != 'BODY'){
div.parentNode.removeChild(div);
}
},time*1000);
}
};
$.removeLoading = function(){
var n = document.getElementById('loading_szy_ver1');
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
};
})(window);
loading(0,'loading.gif');
</script>
增加cookie判断是否是第一次加载页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
<title>loading</title>
</head>
<body>
fgdfgfdgdfgdfgdfgdfgf
</body>
</html>
<script>
/*
autor : shizhouyu
方法：
loading(time,loadimg)
参数说明：
time loading加载几时关闭，不传或者传为0视为不关闭
loadimg：动态转动的图片，不传则只显示文字
方法：
removeLoading()
删除正在运行的loading层
*/
;(function($){
function isIE(){
if(window.navigator.userAgent.toLowerCase().indexOf('msie') >= 1){
return true;
}
else{
return false;
}
}
if(!isIE()){
HTMLElement.prototype.__defineGetter__('innerText', function(){
var str = '';
var childS = this.childNodes;
for(var i = 0; i< childS.length; i++) {
if(childS[i].nodeType == 1){
str += childS[i].tagName == 'BR' ? '\n' : childS[i].textContent;
}
else if(childS[i].nodeType == 3)
str += childS[i].nodeValue;
}
return str;
}
);
HTMLElement.prototype.__defineSetter__('innerText', function(sText){
this.textContent = sText;
}
);
}
$.cookieSet = function(name, val, parm) {
var d;
parm.G && (d = new Date, d.setTime(d.getTime() + parm.G));
document.cookie = name + "=" + val +(d ? "; expires=" + d.toGMTString() : "") +'; domain='+ (parm.domin ? parm.domin : '') +'; path='+(parm.path ? parm.path : '')+';';
};
$.cookieGet = function(name) {
return (name = RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) ? name[2] : null;
};
$.loading = function(time,loadimg){
var cookieEN = cookieGet('loadF');
if(!cookieEN){
cookieSet('loadF',1,{'G':30*60*1000});
if(arguments.length == 0){
time = 0;loadimg='';
}
if(arguments.length == 1){
time = arguments[0];loadimg='';
}
var div = document.createElement('div');
var smallD = document.createElement('div');
div.style.height = '100%';
div.style.width = '100%';
div.style.zIndex = 99999;
div.style.position = 'fixed';
div.style.backgroundColor = '#fff';
div.style.top = 0;
div.style.left = 0;
div.id = 'loading_szy_ver1';
smallD.style.height = '50px';
smallD.style.width = '190px';
smallD.style.zIndex = 999999;
smallD.style.position = 'absolute';
smallD.style.borderWidth = '1px';
smallD.style.borderStyle = 'solid';
smallD.style.borderColor = '#216DCC';
smallD.style.top = '50%';
smallD.style.left = '50%';
smallD.style.marginTop = '-25px';
smallD.style.marginLeft = '-95px';
var img = '';
var temp = '';
if(loadimg != ''){
img = '<img src = "'+ loadimg +'" width="35" height="35" style="position:absolute;top:7px;left:7px;"/>';
temp = '<p style="position:absolute;top:17px;left:50px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
}else{
temp = '<p style="position:absolute;top:17px;left:20px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
}
smallD.innerHTML = img + temp;
div.appendChild(smallD);
document.body.appendChild(div);
var flag = 1;
var timep = setInterval(function(){
var p = smallD.getElementsByTagName('p')[0];
if(flag == 1){
p.innerText = '页面加载中，请稍后..';flag = 2;
}else if(flag == 2){
p.innerText = '页面加载中，请稍后...';flag = 3;
}else if(flag == 3){
p.innerText = '页面加载中，请稍后....';flag = 4;
}else{
p.innerText = '页面加载中，请稍后.';flag = 1;
}
},300);
if(!!time){
var timer = setTimeout(function(){
if(div && div.parentNode && div.tagName != 'BODY'){
div.parentNode.removeChild(div);
}
},time*1000);
}
}
};
$.removeLoading = function(){
var n = document.getElementById('loading_szy_ver1');
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
};
})(window);
loading(10,'loading.gif');
</script>
增加的cookie判断是否是第一次加载页面，如果没有就显示loading,如果不是第一次加载，则直接显示页面不显示loading,loading的显示的cookie设置时间是30分钟，超过30分钟认为又是新页面的，需要重新显示loading层！
js用法很简单，不传值的情况下会一直显示显示loading,这个时候可以配合页面资源加载完毕后再调用removeLoading()删除loading层就可以了。
页面loading另外一种用法！
页面进来先执行loading,等图片全部加载完成后再删除loading层，这里涉及计算页面所有的图片的路径的方法，这里附上实例代码！
function getImgUrl(){//获取绑定到元素上的所有的图片路径
var mydiv = document.getElementsByTagName('*');
var obj = [];
var pattern = /url\((.*\.(jpg|png|gif|bmp))\)/;
for(var i=0;i < mydiv.length;i++){
if(mydiv[i].currentStyle) {
var pattern = /url\(\"(.*\.(jpg|png|gif|bmp))\"\)/;
var img = mydiv[i].currentStyle['backgroundImage'].toString();
if(img != 'none'){
if(pattern.test(img)){
obj.push(RegExp.$1);
}
}else{
continue;
}
} else if(window.getComputedStyle) {
var pattern = /url\((.*\.(jpg|png|gif|bmp))\)/;
var img = window.getComputedStyle(mydiv[i] , null)['backgroundImage'].toString();
if(img != 'none'){
if(pattern.test(img)){
obj.push(RegExp.$1);
}
}else{
continue;
}
}
}
return obj;
}
loading(0,'images/loading.gif');
var obj_img = getImgUrl();
var _l = obj_img.length;
var oc = 0;
for(var i = 0;i < _l; i++){
var img = new Image();
img.onload = function(){
oc++;
if(oc >= _l){
removeLoading();
$('.w').show();
}
}
img.src = obj_img[i];
img.onload = img.onerror = img.onabort = function(){
oc++;
if(oc >= _l){
removeLoading();
$('.w').show();
}
}
}
页面loading提示效果的更多相关文章
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- salesforce 零基础学习（二十七）VF页面等待（loading）效果制作
进行查询的情况下,显示友好的等待效果可以让用户更好的了解目前的状态以及减少用户消极的等待,例如下图所示. VF提供了<apex:actionStatus>标签,,此标签用于显示一个AJAX ...
- vue实战之狗血事件：页面loading效果诡异之事
接上回 想加一个切换路由时,跳出一个loading动画 ,路由加载后就消失 先做了一个loading提示的浮动层的组件,全局注册,在几个路由页面都引入 在vuex里面维护一个变量比如isLoading ...
- 炫！一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- js简单实现删除记录时的提示效果
删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的 样式 复制代码代码如下: <style type="text/css"> ...
随机推荐
- eclipse 在win7 64两个图标出现位操作系统无法锁定到任务栏或任务栏
eclipse 在win7 64位操作系统无法锁定到任务栏或者任务栏上出现两个图标 解决的方法 eclipse在win7 64bit下无法锁定到任务栏问题(或是锁定后任务栏出现两个eclipse图标) ...
- hdu 4870 Rating(可能性DP&高数消除)
Rating Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- linux网络编程投票
投票系统 1.说明: 写了一个投票系统.过程是先配置好server,在写一个网上投票功能.要实现网上投票功能. 事实上功能实现还是非常easy的,麻烦一点的在于过程比較繁杂,要做的东西还是挺多的. 2 ...
- jQuery形式可以计算，它包含了无线电的变化价格，select价格变化，删除行动态计算加盟
jQuery能够计算的表单,包含单选改变价格,select改变价格,动态加入删除行计算 各种表单情况的计算 演示 JavaScript Code <script type="text/ ...
- hdu 4115 石头剪子布（2-sat问题）
/* 意甲冠军:石头剪子布,目前已知n周围bob会有什么,对alice限制.供u,v,w:设w=0说明a,b回合必须出的一样 否则,必须不一样.alice假设输一回合就输了,否则就赢了 解: 2-sa ...
- [cocos2dx注意事项009]试用quick-cocos2dx-2.2.4
quick-cocos2d-x 在中国站http://quick.cocoachina.com/?page_id=40,用他们自己的话说:quick-cocos2d-x(后文简称 quick)与 co ...
- Android而一个超级漂亮的日历控件
※效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluZ2xvbmd4aW4yNA==/font/5a6L5L2T/fontsize/400/fil ...
- MyEclipse10.0 集成 SVN
一:下载服务端和client工具 服务端安装工具:Setup-Subversion-1.6.5.msi client安装工具:TortoiseSVN 下载地址:http://subclipse.t ...
- Routing路由
Routing路由 新版Routing功能介绍 在ASP.NET 5和MVC6中,Routing功能被全部重写了,虽然用法有些类似,但和之前的Routing原理完全不太一样了,该Routing框架不仅 ...
- Android APK反编译就这么简单 详细解释（简介）
学习Android开发过程,你会向别人学习如何应用软件的开发,那些漂亮的动画和复杂的布局可能让你爱不释手,作为开发者.你可能真的想知道的是如何实现的界面效果.然后.您将能够更改应用程序APK反编译查看 ...