Affichage d'un throbber pendant le chargement et le rendu d'une page html

Question

J'ai une page qui s'affiche lentement. Le voyage à travers le net est rapide. La charge initiale de la page est rapide. Vous pouvez réellement voir (si votre machine est assez lente), la disposition initiale des composants html. Ensuite, certains trucs javascript s'exécutent, rendant certains de ces composants tous ajax. Ensuite, le CSS est appliqué.

Je ne peux rien faire à propos du javascript qui ralentit tout à une exploration. J'ai donc besoin d'un throbber pour dire à l'utilisateur de tenir le coup, le navigateur fonctionne. Y at-il un moyen de piéger le navigateur est rendu événement de rendu? Y a-t-il même un tel événement? Y a-t-il une autre façon de faire cela?

Answer 1

Afficher le throbber avant que le code est exécuté et se cacher après.

En utilisant JQuery:

$("#throbber").show(); 
/* Your AJAX calls */ 
$("#throbber").hide(); 

Answer 2

Vérifiez que le DOM est prêt avant d'appeler tous vos éléments Ajax.

utilisant Prototype:

document.observe("dom:loaded", function() { 
    //your code 
}); 

utilisant jQuery:

$(document).ready(function() { 
     //your code 
}); 

Answer 3

Jetez un oeil sur: http://plugins.jquery.com/project/throbber