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

最初隐藏正文，然后在加载后用jQuery显示它。

body {
    display: none;
}

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

此外，最好将$('body').show();作为上一个和主要.js文件中的最后一行。

Answer 4

你也可以这样....这只会在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 5

尝试使用javascript！似乎是最好和最简单的方法。只有在完全加载HTML页面后，您才会获得内置的funcn来执行HTML代码。

或者您可以使用基于状态的编程，其中事件发生在浏览器的特定状态。

加载完成后显示HTML页面

5 个答案: