顯示正在加載CSS和JS文件時加載Bar或GIF動畫？

我已經看到這個問題在其他網站上的問題（只是JS或只是CSS），所以，但我還沒有看到一個很好的方法來做到這一點呢。顯示正在加載CSS和JS文件時加載Bar或GIF動畫？

我的情況相當普遍。我使用.NET MVC並在Visual Studio中開發。我有一個頁面的Site.Master和多個視圖，每一個內容佔位符，我指定我的JS和CSS文件，像這樣：

<asp:Content ID="headerContent" ContentPlaceHolderID="HeaderContent" runat="server"> 
    <link href="../../CSS/example.css" rel="stylesheet" type="text/css" /> 
    <script src="../../JS/jquery/jQueryFile.js" type="text/javascript"></script> 
    <!-- More files here --> 
</asp:Content>

我的導航欄是一個精靈形象，類似於一個看到Apple's website。我的網站部分帶有標題，也類似於Apple的圖片。所以我的網站不是非常重要的圖像，但特別是當我在IE瀏覽器（也包括Firefox，在某種程度上），網站排序本身在我眼前，而它加載圖像和插件jQuery文件datatables插件總是需要一秒鐘才能應用到我的表）。

我寧可不顯示頁面，直到所有的圖像，CSS和JS文件已加載。一個不錯的進度條，甚至是一個GIF動畫，在我向他們展示最終的網站之前都會顯示出來，全部加載完畢。我認爲Gmail的加載欄使用了相同的想法。

有沒有關於如何最好地實現這一點的建議？非常感謝。

來源

2010-03-01 Matt Powell

試試這個：http://bytes.com/topic/javascript/answers/512734-how-make-progress-bar-while-browser-loading-page

來源

2010-03-01 15:48:45

我沒有嘗試過這一點的是，給它一個謹慎的嘗試。在$（document）.ready內部，創建一個疊加層，顯示一個加載圖標，就像一個動畫圈子一樣。我假設你會將它命名爲#overlay。

然後，$（文件）。就緒外，試試這個

$(window).load(function(){ 
    $("#overlay").hide(); 
});

$（窗口）.load意味着一切準備就緒：此http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

來源

2010-03-01 15:59:42

@DN，謝謝。它看起來很有前途，但是當我在我的網站上試用它時，仍然有一些圖像在$（window）.ready（）之後加載。我可以將這歸因於我的一些其他JS文件（例如數據表插件）在加載時正在應用CSS。所以我可能需要$（window）.ready（）作爲剛剛在頁面上硬編碼的圖像的某種組合，還有其他東西在我的JS文件仍在加載（並應用它們的CSS）時掛起。 –

@Mega馬特，沒問題。你可能會有這些js文件在完成時向body標籤添加一個類，然後添加類似$（「body.ready1.ready2.ready3」）。find（「＃overlay」）。hide（）; –

顯示正在加載CSS和JS文件時加載Bar或GIF動畫？

回答

相關問題