如何在實際負載之前顯示加載圖像？

我想隱藏我的網頁的正文。一旦網頁的身體標記的所有內容都準備好顯示，我想顯示它的身體，但直到那個時候我想顯示一些加載圖像。如何在實際負載之前顯示加載圖像？

如果由於某種原因身體的內容不能正確加載我想顯示一條錯誤消息。

在javascript中這樣做的最好方法是什麼？

2009-12-07 Anurag

你給我們說明，還是有問題嗎？ – helloandre 2009-12-07 10:16:02

我試圖讓這個更好的英語，但如果我改變了意思，你能糾正它嗎？ – 2009-12-07 10:16:34

其實很簡單。您必須在頁面上放置全屏div，並在onload功能被觸發時將其隱藏。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     #loading-overlay { 
      position: absolute; 
      z-index: 1000; 
      height: 100%; 
      width: 100%; 
      left: 0; 
      top: 0; 
      background-color: #003366; 
      color: white; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <div id="loading-overlay">This is a loading screen</div> 

    <p>The page has loaded!</p> 

    <!-- The following is to slow down the page load so that the effect can be observed --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=10"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1232"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12341"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123459"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234568"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12345677"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567863"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567891"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script> 
    <script type="text/javascript">   
     $(function() { 
      $("#loading-overlay").hide(); 
     }); 
    </script> 
</body> 
</html>

來源

2009-12-07 10:21:00

是否有可能將div和css放在頭部之前？因爲我有大量的CSS和JavaScript中間的內容，爲了讓body標籤中的div能夠被讀取，必須加載它們。 – Borsn 2015-02-12 22:52:16

這不是有效的HTML。 – 2015-02-12 23:29:37

如何在實際負載之前顯示加載圖像？

回答

相關問題