Comment fonctionne la fonction "document ready" de jQuery?

Question

Comment jQuery vérifie-t-il si le document est chargé? Comment vérifie-t-on que le chargement du document est terminé?

Answer 1

Découvrez la fonction bindReady dans le code source.

Ils se lient à l'événement DOMContentLoaded (ou onreadystatechange sur certains navigateurs). Ils ont aussi un repli régulier de la charge de l'événement, dans le cas où le DOMContentLoaded n'est pas pris en charge ou pas viré pour d'autres raisons. Sur les navigateurs de le soutenir, de l'utilisation de cet appel:

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

Sur IE <9:

document.attachEvent( "onreadystatechange", DOMContentLoaded);

La deuxième instance de l' DOMContentLoaded de ces appels est une fonction à - fait une référence à l' ready fonction droite au-dessus d' bindReady dans le code source. Cette fonction permettra de vérifier que l'arbre du DOM est effectivement fait en vérifiant document.body. Si il n'existe pas encore, ils attendent un ordre de la milliseconde (à l'aide de setTimeout) et vérifiez de nouveau. Lorsque le document.le corps existe, ils traversent la liste de rappels que vous avez défini.

Answer 2

Donc, il y a un peu passe derrière les coulisses, mais c'est l'essentiel, directement pour le jQuery source:

// Mozilla, Opera and webkit nightlies currently support this event
        if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }

Donc, pour la plupart des navigateurs (Mozilla, Opera et Webkit) il y a un DOMContentLoaded événement que jQuery est à l'écoute pour, lorsqu'il est déclenché, puis il appelle tous les prêts gestionnaires que vous avez enregistré avec jQuery.

IE agit un peu différemment, car ils n'ont pas l' DOMContentLoaded événement, ils essaient d'accrochage dans l' onreadystatechange événement du document, ils ont également raccorder l' window.onload événement, ainsi que de faire un sournois peu de code où ils essaient continuellement et de faire défiler la page à chaque milliseconde (doScrollCheck). Qui jamais l'un de ces feux de premier déclenche le prêt et des gestionnaires d'événements ultérieurs sont ignorés.

J'espère qu'un sens et vous aide :)

Answer 3

jQuery n'est pas faire tout ce que JavaScript ne peut pas/ne pas faire - c'est tout simplement un framework JavaScript/bibliothèque. Ce qu'il fait est de fournir des wrappers autour d'événements JavaScript que mettre en œuvre les navigateurs, tels que l' onload ($.load()) et DOMContentLoaded ($.ready()). Bien sûr, il y a beaucoup de travail sous le capot qui tente de faire de ce comportement standard que possible entre les navigateurs et les travaux autour de navigateur de bugs, des problèmes et des incompatibilités.

Par exemple, c'est à dire n'a pas vraiment de soutien DOMContentLoaded avant IE 9 mais jQuery doit fournir une implémentation pour elle. Vous pourriez voir ces liens pour comprendre plus au sujet de ce que cet événement est et comment on pourrait mettre en place quelque chose de similaire, même sans jQuery:

• http://api.jquery.com/ready/#comment-85629494
• http://www.zachleat.com/web/domcontentloaded-inconsistencies/
• http://www.kryogenix.org/days/2007/09/26/shortloaded
• $(document).prêt équivalent sans jQuery

Si vous voulez vraiment voir ce qui est fait par jQuery, vous devriez vérifier le jQuery source.