前言：
现在做页面一般为了提示友好点，一般会做个页面正在加载的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();
}
}
}