当前位置:编程学习 > JS >>

js等待加载效果

实例可以直接运行查看效果。很方便快捷

[html]
<html> 
<head> 
<meta http-equiv="content-Type" content="text/html;charset=gb2312"> 
<style type="text/css"> 
<!-- 
*{margin:0;padding:0;} 
.ifr_div{width:600px;height:600px; position:relative;} 
.ifr_div img{ vertical-align:middle;} 
.proccess{border:0px solid;border-color:#009900;height:600px;line-height:600px;width:600px;text-align:center;background:#eee;margin:0;position:absolute;top:0;left:0;} 
.proccess b{vertical-align:middle;background:url(http://ok22.org/upload/images/20110902143538381.gif) no-repeat 0 center;padding-left:35px;display:inline-block;} 
--> 
</style> 
</head> 
<body> 
<div class="ifr_div"> 
    <div class="proccess" id="loading"><b>正在加载中。。。</b></div> 
    <iframe id="sfa" name="sfa" frameborder="0" scrolling="auto" height="600" width="600"></iframe> 
</div> 
<script language="JavaScript"> 
var iframe = document.getElementById("sfa");  
iframe.src = "http://www.ok22.org";  
if (iframe.attachEvent){  
    iframe.attachEvent("onload", function(){ 
    document.getElementById("loading").style.display="none"; 
    });  
} else {  www.zzzyk.com
    iframe.onload = function(){ 
    document.getElementById("loading").style.display="none"; 
    };  
}  
</script> 
</body> 
</html> 

 作者:junmoxie

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,