对页面的某个特定div实行loading效果

Question

我想在页面的某个div，比如div如下：
<div id="mainFrame">
<div>
现在想在这个div上面覆盖一个loading div，等到这个div里面的元素加载完后就把这个loading div给隐藏。这个如何实现?求助！～～～

Answer 1

如果你是想说使用框架，那你只要在框架页中
window.onload=function(){
    //执行将loading div隐藏的操作就行了
}
如果你的mainframe就真的只是一个层，在之前是没有内容的，变通点的话，你可以设置一个定时器去检查mainframe中是否已经有内容了，没有内容就继续执行检测，如果已经有内容了，那就停止定时器，隐藏loading div
<div id="mainFrame">
<div><div id="div_load">1111</div>
<script type="text/javascript">
function ClearLoading(){
    var o=document.getElementById("mainFrame");
    if(o.innerHTML!=''){
        alert('已经加载完');
        document.getElementById("div_load").style.display='none';
    }else{
        setTimeout(function(){
            ClearLoading();
        })
    }
}
ClearLoading();
</script>

Answer 2

不是框架，就是一个div。但是我现在不知道怎么样设计另外一个div，把这个div覆盖了id为mainFrame的div。等到id为mainFrame的div里的内容加载完后就把这个loading div隐藏。

Answer 3

http://jqueryui.com/demos/dialog/#modal........下面是个简易的遮罩层效果，如果你的项目中需要大量使用此效果，建议使用成熟的对话框插件，比如：artDialog
或者jQuery Dialog
<script type="text/javascript">
function ShowLoad(text){
    /*这一部份是显示底下的遮罩层*/
    var w= document.documentElement?(document.documentElement.scrollWidth || 0):(document.body.scrollWidth || 0);
    var h= document.documentElement?(document.documentElement.scrollHeight || 0):(document.body.scrollHeight || 0);
    var o=document.getElementById("overlay");
    o.style.width=parseInt(w)+'px';
    o.style.height=parseInt(h)+'px';
    o.style.background='#bfbfbf';
    o.style.left=0;
    o.style.top=0;
    o.style.filter='Alpha(Opacity=45)'; 
    o.style.MozOpacity='0.45'; 
    o.style.opacity='0.45';
    o.style.display='block';
    o.style.position='absolute';
    o.style.zIndex=101;
    
    /*这一部份是显示底下的load层*/
    var load=document.getElementById("div_load");
    var h1= document.documentElement?(document.documentElement.scrollTop || 0):(document.body.scrollTop || 0);
    h1 = Math.max(h1, (window.scrollY || 0));
    var h2= document.documentElement?(document.documentElement.clientHeight || 0):(document.body.clientHeight || 0);
    load.innerHTML=text;
    load.style.zIndex=102;
    load.style.position='absolute';
    load.style.display='block';
    var h3=load.clientHeight;
    var w2=load.clientWidth;
    load.style.left=parseInt((w-w2)/2)+'px';
    load.style.top=parseInt((h2/2)+h1-h3)+'px';
}
</script>
<div id="overlay"></div>
<div id="div_load" style="border:1px solid #99ff00;display:none;"></div>
<input type="button" value="显示加载层" onclick="ShowLoad('内容正在加载中,请稍候……')" />

Answer 4

汗，上面怎么成那个鬼样子了
或者jQuery Dialog