在顯示HTML5之前加載內容

我在互聯網上開發雜誌，我想知道是否可以在實際顯示內容之前將所有內容（圖像，視頻，DOM）加載到就緒狀態。加載時，進度條將顯示內容加載的進度。非常感謝你！在顯示HTML5之前加載內容

2012-01-23 AJ Naidas

有類似：

<body> 
    <div id="allcontent" style="display:none;"> 
      <!-- your entire page --> 
    </div> 
    <div id="progressbar">...</div> 
</body>

然後

$(window).load(function() { 
    $('#progressbar').remove(); 
    $('#allcontent').show(); 
});

編輯：你可以通過計算$('img')數，然後在每個計算已加載圖像的比例模擬進展$('img').load事件。這不是完美的，但總比沒有好

2012-01-23 10:35:44 ori

當javascript不可用時，這將使內容無法訪問 – fcalderan

然後將它隱藏在'$（document）.ready'上，而不是在HTML中。（它會閃爍？） – ori

這就是@AJ奈達斯想要的。 –

我建議一個類似樣板的解決方案，使用適用於<html>元素的特定類。看我的例子小提琴：http://jsfiddle.net/tKtYd/

這個想法是通過JavaScript應用類waitpageloadbeforedisplay很快在head，然後在CSS中使用這個類來隱藏主站點包裝。然後等待窗口load事件刪除該類並顯示您的網站內容。即使JavaScript不可用/禁用，內容仍然可以訪問。

使用css規則.waitpageloadbeforedisplay body（因此您不需要使用標記進行樣式設計），裝載程序顯示爲正文背景。

2012-01-23 10:45:47 fcalderan

回答