页面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(); } } }
