javascript - 加载完成后显示 HTML 页面

Question

有没有办法强制浏览器仅在页面的所有内容(例如图像、脚本、css 等)完全加载后才显示该页面？

Answer 1

最简单的做法是在正文中放置一个带有以下 CSS 的 div:

#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 的客户。它不应该引起任何闪烁或其他副作用，但由于没有对其进行测试，我不能完全保证它适用于所有浏览器。