标签：
前言：
现在做页面一般为了提示友好点，一般会做个页面正在加载的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>
js用法很简单，不传值的情况下会一直显示显示loading,这个时候可以配合页面资源加载完毕后再调用removeLoading()删除loading层就可以了。
标签：
原文地址：http://www.cnblogs.com/shizhouyu/p/5057116.html
