加载完成后显示HTML页面

Question

有没有办法强制浏览器只在完全加载所有页面内容后显示页面(如图像,脚本,CSS等)？

Answer 1

最简单的方法是div在主体中添加以下CSS:

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

(注意position: fixed在IE6中不起作用 - 我知道在浏览器中没有确定的方法)

像这样添加DIV(直接在开始body标记之后):

<div style="display: none" id="hideAll">&nbsp;</div>

直接显示DIV:

 <script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script> 

并隐藏它onload:

 window.onload = function() 
  { document.getElementById("hideAll").style.display = "none"; }

或者使用jQuery

 $(window).load(function() {  document.getElementById("hideAll").style.display = "none"; });

这种方法的优点是它也适用于关闭JavaScript的客户端.它不应该导致任何闪烁或其他副作用,但没有测试它,我不能完全保证它在那里的每个浏览器.

Answer 2

在页面上放置一个叠加层

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

然后删除window.onload处理程序中的该元素,或隐藏它

window.onload=function() {
    document.getElementById('loading-mask').style.display='none';
}

当然,如果您使用的是库,那么您应该使用您的javascript库(jquery,prototype ..)特定的onload处理程序.

Answer 3

你也可以这样做......这只会在 javascript 加载后显示 HTML 部分。

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>

Answer 4

最初隐藏主体,然后在加载后使用jQuery显示它.

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready

此外,最好$('body').show();将最后一行作为最后一个主要.js文件.