页面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"> ...
随机推荐
- Laravel nginx 伪静态规则
最近的各种调查PHP相框(CI, Cake, ThinkPHP, Laravel, Yii)情绪Laravel它看起来很漂亮,下一个深入了解.用发展机Apache,Stage在运行nginx,一旦部署 ...
- Xenomai 3 和 PREEMPT_RT 有哪些优势相比，
Q: 我可以在我的开发板PREEMPT_RT直接在内核环境中执行POSIX应用, 使用Xenomai3 这是什么原因它? A:假设你的应用程序已经完全是POSIX,而且性能也满足,则,而且也没有理由去 ...
- 使用Eclipse设定Android开发环境
使用Eclipse设定Android开发环境 花了大概几天的时间最终搭建好了开发Android的环境了! 我是使用Eclipse +ADT顺利地搭建Android开发环境的. 如今Google以及An ...
- mybatis型材xxxx.xml缺少后果返回类型
下面是一个mybatis型材xxxx.xml失踪resultMap错误: 严重: Servlet.service() for servlet [SpringMVC] in context with p ...
- CentOS安装KVM步骤虚拟机，绝对实用！
KVM(Kernel-based Virtual Machine)速记.这是rhel5.4最新的虚拟化技术启动,现在只支持红帽64位rhel5.4在执行KVM,硬件必须支持同一时间VT技术,网上找 ...
- eclipse字母大写和小写转换的快捷键
大写转换小写 ctrl+shift+y 小写转换大写 ctrl+shift+x
- asp.net学习之再论sqlDataSource
原文:asp.net学习之再论sqlDataSource 本节从上一节没有阐述的几个方面,再讨论一下SqlDataSource的用法及注意的事项. 上一节的链接地址如下:http://www. ...
- hdu 新生晚会
Problem Description 开学了,杭电又迎来了好多新生.ACMer想为新生准备一个节目.来报名要表演节目的人很多,多达N个,但是只需要从这N个人中选M个就够了,一共有多少种选择方法? ...
- 前端项目部署之Grunt
如果你的前端项目很小或都者项目不需要通过专门的运维同学走流水线上线部署的话,那么可以略过以下的繁文. ok,Let's go! 我们看看如何使用grunt来部署上线项目? 前端项目一般分为两种类型:T ...
- 无废话WCF入门教程五[WCF的通信模式]
一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务 ...