页面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"> ...
随机推荐
- 三种字符编码：ASCII、Unicode和UTF-8
原文:三种字符编码:ASCII.Unicode和UTF-8 什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字 ...
- main真正的形状函数
我们经常使用的像 int main()这种形式,但main长身体机能完全到底是什么样子? 以下这个main函数的形式可能有些出乎我们的意料: int main(int argc, char *argv ...
- a web-based music player(GO + html5)
github 住址:https://github.com/codercheng/music-player 后台是用GO (windows/ linux 都能够),前端是HTML5 推荐用chrome浏 ...
- web架构设计经验分享（转）
本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查 ...
- C# 获得Excel工作簿Sheet页面(工作表)集合的名称
#region 获取Excel工作薄中Sheet页(工作表)名集合 /// <summary> /// 获取Excel工作薄中Sheet页(工作表)名集合 /// </summary ...
- hdu 4975 最大流问题解决队伍和矩阵，利用矩阵dp优化
//刚開始乱搞. //网络流求解,假设最大流=全部元素的和则有解:利用残留网络推断是否唯一, //方法有两种,第一种是深搜看看是否存在正边权的环.见上一篇4888 //至少四个点构成的环,另外一种是用 ...
- Effective C++：条款14：在中小企业资源管理copying表现
(一) 在一项条款说法auto_ptr和tr1::share_ptr适合heap-based资源.然而,并非所有的资源都heap-based的.换句话说不tr1::shared_ptr 和 auto_ ...
- C语言中符号格式说明
scanf 语法: #include <stdio.h>int scanf( const char *format, ... ); scanf()函数根据由format(格式)指定的格式从 ...
- DirectSound应用
只是使用的假设PlaySound()这个API函数来显示的声音效果,然后,然后,它不会出现在混合声音,因为PlaySound还有播放期间声音,这将不可避免地导致现有声音停止. 因此,使用 PlaySo ...
- C#将Word,Excel与Html,PDF互转
public class OfficeHelper { /// <summary> /// word转成html /// </summary> /// <param na ...