网页延迟加载功能

<!--/loading.html/-->
  <script>
  document.onreadystatechange=function(){
  if(document.readyState=="complete"){
         document.getElementById('loading_div').style.display='none';
     }
}
</script>
<div id="loading_div" style="position:absolute;width:108%;height:108%;
left:0px;top:0px;background-color:#ffffff;filter:alpha(opacity=100)"> 
<div style="text-align:center;padding-top:200px">
正在加载数据,请稍候 .
<hr style="height:1px;width:50%">

 
Loading 
</div>
</div>
可以将此页面做为公用页面,利用iframe调用其他页
<iframe src="http://ding0910.cnblogs.com/" style="height:100%;width:100%;margin:0;
padding:0;border=0"></iframe>

亦或者在其它JSP页面上,利用<jsp:include page="loading.html" />来引入该页面





$.ajax({
     url:"",
     success:function(){在这里隐藏‘数据正在加载中’,显示‘需要显示的div’}
});
showLoading()//显示‘数据正在加载中’;








之前看别人用的是document.onreadystatechange的方法来监听状态改变,然后用document.readyState == “complete”判断是否加载完成,代码如下:
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething()
{
if(document.readyState == “complete”) //当页面加载状态为完全结束时进入
myform.submit(); //这是你的操作
}
这种办法对一些页面简单,DOM较少的页面是好的解决方案,但是最近页面里面有嵌入flash,发现flash有自己载入东西的功能,跟页面无关,所以用之前的办法行不通啦,自己变通了一下,用setInterval来监听事件。
代码如下:
var start;
window.onload = function () {
start = setInterval(’updateImg()’, 1000);
}
function updateImg() {
if (document.readyState == “complete”) {
try{

clearInterval(start);//执行成功,清除监听
}catch(err){return true;}
}
}

改正一下,因为之前没有测试firefox的,所以并没有发现firefox不支持document.readyState == “complete”,firefox的加载完成事件用window.onload就可以了,所以这个代码修改如下:
var start;
window.onload = function () {
if(document.all) {//简单判断是否是IE
start = setInterval(’updateImg()’, 1000);
} else {
…//要执行的语句
}
}
function updateImg() {
if (document.readyState == “complete”) {
try{

clearInterval(start);//执行成功,清除监听
}catch(err){return true;}
}
}

你可能感兴趣的:(JavaScript,Ajax,UI)