La précontrainte et exécuter jQuery/javascript avant l'affichage de la page

Je travaille sur un projet où il y a beaucoup de jQuery se passe. Quand je vais à la page, je peux voir le jQuery en cours d'exécution (par exemple, $.button() éléments sur la page apparaissent encore comme normale éléments html avant de jQueryUI est chargé :S) donc, au départ, il semble tout moche PUIS, une fois que tous les JS est chargé et exécuté, il semble "gentil".

Ce n'est pas juste une affaire de préchargement des images ou que ce soit, je veux EXÉCUTER le code jQuery, mais "cacher" des visiteurs, de sorte qu'une fois que la page est ouverte, il semble "gentil" tout de suite OU affiche un écran noir en disant: "Chargement..." jusqu'à ce que le jQuery a fini de s'exécuter.

Prendre un coup d'oeil ici: http://www.filamentgroup.com/ , même si je ne suis pas sûr que fonctionne actuellement le site du javascript avant de l'afficher, mais il montre que l'idée de base d'avoir un écran noir en disant: "Chargement...".. je pense que c'est ce qui se passe dans les grandes applications web telles que SlideRocket si elle n'utiliser le flash... :S

Personnellement, je viens de quitter le site. Je ne suis pas ici pour regarder un purty purty chargement de l'image, à moins que je n'ai pas le choix (voir ExtJS/Dojo API docs). Je préfère la préfère le chargement de votre page, partie par partie ou de trouver une autre solution à un évident problème de performance, que de venir à votre chargement de l'image. Mais c'est moi. Je suis sûr que quelqu'un va être bientôt avec un morceau de jQuery.

OriginalL'auteur meltuhamy | 2011-09-14

  1. 4

    Vous répondu à la question vous-même. Avoir une sorte d'écran de chargement qui cache la page jusqu'à ce que le jQuery est exécuté.

    Essayer quelque chose comme ce qui suit.

    Cela va en haut de votre page:

    <div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>

    Voici votre jQuery:

    $(document).ready( function() {

    /*
     * ... all of your jQuery ...
     */

    //At the bottom of your jQuery code, put this:
    $('#loadingMask').fadeOut();
});
    me battre 30 secondes!
    Genius. Fonctionne comme un charme. Court, précis, et les œuvres. Merci.
    Bradley il fonctionne très bien aussi pour moi, merci! Mais avez-vous peut-être avoir une idée de la façon de ne pas faire de la page d'obturation pour une seconde fois dans la première charge? Essayez d'entrer dans mon site: soulstudio.l'ue - vous pouvez voir que sur la première entrée de la page entière, flash pour une seconde. Comment l'éviter?

    OriginalL'auteur Matt Bradley

  2. 2

    Envelopper tous vos jQuery que vous voulez "précontraint" dans cette :

    $(window).load(function() {
    //Your jQuery here
});

    ou sinon, pas toutes vos jQuery code à l'intérieur de l'emballage. Au contraire, mettez votre jQuery DOM changements dans un 

    $(document).ready(function(){
    //jQuery
}))

    et ensuite avoir un wrapper pour tout le contenu de votre site.

    <div id="everything-wrapper">
    <!-- put your body here -->
</div>

    et régler l'affichage à aucun dans votre CSS

    #everything-wrapper {
    display : none;
}

    et puis avec la fenêtre de chargement comme précédemment

    $(window).load(function() {
    $("#everything-wrapper").show();
    //or
    $("#everything-wrapper").fadeIn("fast");
    //to be fancy with it
});
    Avez-vous lu le problème? La plupart de chargement de la page, PUIS de jQuery et jQuery UI fonctionne, changer les boutons standard en jQuery UI boutons et autres objets.
    Avez-vous lu ma solution? Essayez-le et voyez si cela ne fonctionne pas. Je vais te parie qu'il fait.
    Vous comprenez que j'ai commenté, quand tout ce qui était là a été votre première solution, non?
    Tu m'as il ace. Vous pourriez le faire sans modifier le DOM bien droit? Je n'ai jamais essayé comme ça.

    OriginalL'auteur SomeShinyObject

  3. 1

    J'ai eu un problème similaire avec un artefact popping up brièvement pendant le chargement de la page dans IE8. La solution que j'ai utilisé était de changer la visibilité de l'conteneur caché à la ligne 1 de la feuille de style css. Ensuite montré l'élément à la fin du fichier jquery. Si le css et jquery commencent à se disputer, l'élément n'est pas visible jusqu'à ce que l'argument est résolu.

    OriginalL'auteur matt

  4. 0

    J'aurais une superposition dans le cadre de votre statique CSS et le HTML, puis quand JQuery charge par

    $(document).ready() vous pouvez masquer la superposition

    OriginalL'auteur rlemon

  5. 0

    La réponse par Christopher est le plus susceptible de la façon FilamentGroup le faire. Vous pouvez avoir javascript "précontraint", il charge en ligne avec le reste de la page, et à cause de cela étant généralement plus grande que le reste de la page prend plus de temps à télécharger. Vous ne pouvez pas faire javascript charge en premier, ce n'est pas la façon dont il fonctionne.

    Cependant, le principe est de "cacher" votre page à partir de la vue dans le CSS (ou avec des styles en ligne comme les CSS ont encore à charge) puis une fois que tout est prêt en javascript montrer tout cela de nouveau. Si vous remarquez qu'il y a un écart entre la page de l'affichage (rien) et le javascript chargement montrant sur FilamentGroup. C'est parce qu'elle se cache de la page, le code javascript chargeur de charge, puis une fois que le reste du javascript a fini il se cache le chargeur et montre la page.

    OriginalL'auteur Alex

  6. 0

    Mec, je vous ai fait un échantillon. J'espère que vous aime. J'utilise quelque chose comme cela sur mon propre site.
    http://jsfiddle.net/jMVVf/

    OriginalL'auteur frosty