页面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"> ...
随机推荐
- js 网上见到的动画函数 备份
<script> function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(fu ...
- UVa 10012 - How Big Is It? 堆球问题 全排列+坐标模拟 数据
题意:给出几个圆的半径,贴着底下排放在一个长方形里面,求出如何摆放能使长方形底下长度最短. 由于球的个数不会超过8, 所以用全排列一个一个计算底下的长度,然后记录最短就行了. 全排列用next_per ...
- Shell编程入门(再版)(在)
简单的演示样本Shell规划 演示样例1. #!/bin/bash #This is to show what a shell script looks like echo "Our fir ...
- 【iOS发展-28】制造业UITabBarController标记控制器、定制UITabBarItem文字图像6途径和More评论
一个.一个简单的制作过程(实际工程中不建议这样的方式,不要只展示所用原理的理解) 在AppDelegate.m在: - (BOOL)application:(UIApplication *)appli ...
- [git] fatal: This operation must be run in a work tree
正在使用git init --bare 它的成立裸仓库后,,正在使用git 其他命令将出现fatal:This operation must be run in a work tree 问题,途径: ...
- 霸气侧漏HTML5--之--canvas(1) api + 弹球例子
html5也许最有吸引力的新功能是canvas 漆.基本可以足够强大后,以取代flash页面的效果.下面来介绍canvas要使用: HTML5 Canvas的基本图形都是以路径为基础的.通常使用Con ...
- android之Fragment（官网资料翻译）
Fragment要点 Fragment作为Activity界面的一部分组成出现 能够在一个Activity中同一时候出现多个Fragment,而且,一个Fragment亦可在多个Activity中使用 ...
- What is WCF
几个博客前,都是关于WCF零散的知识.要了解下下面的宏,什么是WCF? WCF:Windows Communication Foundation(WCF)框架. 1.WCF体系框架 2.框架分析 2. ...
- 自定义Data Service Providers
自定义Data Service Providers 作者:AlexJ 翻译:谈少民 原文链接:http://blogs.msdn.com/b/alexj/archive/2010/01/07/data ...
- 详细解释 集成Maven Spring Mybatis项目包生成Bat文件
有时在项目必须Maven项目包生成bat文件,长官一人.本文将解释的具体使用方法maven-assembly-plugin插件实现bat文件包. 1.首先看一下项目结构 2.配置pom.xml文件,在 ...