Afficher la barre de chargement ou le fichier GIF animé pendant le chargement des fichiers CSS et JS?

Question

J'ai vu cette question posée en morceaux (juste JS ou simplement CSS) sur d'autres sites et SO, mais je n'ai pas encore vu une bonne façon de le faire.

Ma situation est assez commune. J'utilise .NET MVC et le développement dans Visual Studio. J'ai une page Site.master et plusieurs vues, chacun avec un espace réservé de contenu où je précise mes JS et les fichiers CSS, comme ceci:

<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> 

Et ma barre de navigation est une image de sprite, similaire à celui vu sur Apple's website. J'ai des sections de site avec des en-têtes, également similaires à Apple, qui sont des images. Donc mon site n'est pas extrêmement lourd d'image, mais surtout quand je regarde dans IE (mais aussi Firefox, dans une certaine mesure), le site se trie sous mes yeux, alors qu'il charge les images et les fichiers jQuery pour les plugins (le plugin datatables prend toujours une seconde pour s'appliquer à mes tables).

Je préfère ne pas afficher la page jusqu'à ce que tous les fichiers images, CSS et JS soient chargés. Une belle barre de progression, ou même un GIF animé suffirait à montrer avant de leur montrer le site final, tout chargé. Je pense que la barre de chargement de Gmail utilise cette même idée.

Y a-t-il des suggestions sur la meilleure façon d'y parvenir? Merci beaucoup.

Answer 1

Essayez ceci: http://bytes.com/topic/javascript/answers/512734-how-make-progress-bar-while-browser-loading-page

Answer 2

Je n'ai pas essayé ceci encore, lui donner un essai prudent. Dans $ (document) .ready, créez une superposition qui affiche une icône de chargement, comme une sorte de cercle animé. Je suppose que vous le nommerez #overlay.

Puis, en dehors de $ (document) .ready, essayez cette

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

$ (fenêtre) .load signifie que tout est prêt: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/