动态创建DIV，加载页面的小问题？

Question

创建了一个DIV，里面放一个框架，框架加载完之前有个加载中 的效果怎么做？
我的做法是：
var iframeObj= document.createElement("div");
    iframeObj.setAttribute("id","hiddenDiv");
    iframeObj.style.display="none";
    iframeObj.innerHTML   ="<iframe src='http://www.163.com' scrolling='no' frameborder='0' width='580' height='400'></iframe>";
    document.getElementById("msgDiv").appendChild(iframeObj);
}
好了,现在的问题是我那DIV默认不显示,在加载完之后显示出框架,怎么做?
<script type="text/javascript">
    document.write('<div id="loadDiv" style="font-size: 14px;font-weight:bold; color:#0099cc;left:10%;position: absolute;top:10%;"><img src="loading.gif"/> 加载中...</div>');
    window.onload = function() {
    document.getElementById("hiddenDiv").style.display="";
    document.getElementById("loadDiv").removeNode(true);    
    }
</script>

Answer 1

平时的页面测试正常
<div id="hiddenDiv" style="display:none">
  <iframe src="http://www.qq.com/" width="100%" height="768px"></iframe>
</div>
  
  
<script type="text/javascript">
document.write('<div id="loadDiv" style="font-size: 14px;font-weight:bold; color:#0099cc;left: 50%;position: absolute;top:40%;"><img src="loading.gif"/> 加载中...</div>');
window.onload = function() {
document.getElementById("hiddenDiv").style.display="";   //显示页面内容   
document.getElementById("loadDiv").removeNode(true);    
}
</script>
现在是动态创建的DIV

Answer 2

    <script type="text/javascript">
    document.write('<div id="loadDiv" style="font-size: 14px;font-weight:bold; color:#0099cc;left: 50%;position: absolute;top:40%;z-index:10008; display:block;"><img src="/images/common/loading.gif"/> 加载中...</div>');
    window.onload = function() {
    document.getElementById("hiddenDiv").style.display="";   //显示页面内容   
    document.getElementById("loadDiv").removeNode(true);    
    }
    </script>现在主要的问题就是这段代码我不知道怎么放,或者应该换一种方法才可以~!!!请高手解答一下....