网页延迟加载功能

<!--/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;}
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值