web-dev-qa-db-fra.com

événements jQuery .load (), .ready (), .unload ()

Juste une question simple, pour l'événement jQuery. Est-ce que .load (), .ready () et .unload () sont exécutés dans l’ordre lorsque le DOM est chargé? La réponse semble positive lorsque je vois la documentation jQuery.

<script type="text/javascript">

    $(window).load(function () {
        // run code
        initializeCode();
    });

    $(document).ready(function() {
        //run code that MUST be after initialize
    });

    $(window).unload(function() {
        Cleanup();
    });
</script>

Cependant, le code à l'intérieur du .ready () est exécuté avant le initializeCode (); est exécuter, alors je me sens vraiment étrange. Et maintenant je dois placer mon code dans la méthode .onload () et juste après le initializeCode (); line, ce qui signifie être dans le bloc .ready ().

Quelqu'un pourrait-il m'expliquer davantage à ce sujet, car je suis nouveau sur jQuery?

javascriptjqueryeventsdom
69
Eric

NOTE: .load() & .unload() ont été obsolètes

$(window).load();

S'exécutera après le chargement de la page et de tout son contenu. Cela signifie que toutes les images, CSS (et le contenu défini par CSS comme les polices et images personnalisées), les scripts, etc. sont tous chargés. Cela se produit lorsque l'événement "Stop" de votre navigateur devient gris, pour ainsi dire. Ceci est très utile pour détecter quand le document avec tout son contenu est chargé.

$(document).ready();

Cela se déclenche dès que le navigateur Web est capable d'exécuter votre JavaScript, ce qui se produit une fois que l'analyseur est terminé avec le DOM. Ceci est utile si vous souhaitez exécuter JavaScript le plus rapidement possible.

$(window).unload();

Cet événement sera déclenché lorsque vous naviguez hors de la page. Cela peut être Refresh/F5, en appuyant sur le bouton de la page précédente, en naviguant sur un autre site Web ou en fermant l’onglet/la fenêtre en entier.

En résumé, ready () sera déclenché avant load () et unload () sera le dernier à être déclenché.

126
Tower

le chargement de la fenêtre attend que toutes les ressources soient chargées.

document ready attend que le document soit initialisé.

bien décharger, attend que le document soit déchargé.

la commande est la suivante: document prêt, chargement de la fenêtre, ... ... ... ... déchargement de la fenêtre.

utilisez toujours le document prêt, sauf si vous devez attendre le chargement de vos images.

sténographie pour document prêt:

$(function(){
    // yay!
});
11
David Murdoch

Si les deux variantes "document.ready" sont utilisées, elles se déclencheront toutes les deux, dans l'ordre d'apparition.

$(function(){
    alert('shorthand document.ready');
});

//try changing places
$(document).ready(function(){
    alert('document.ready');
});
6
ljgww

De plus, j'ai remarqué une autre différence entre .load et .ready. J'ouvre une fenêtre enfant et j'effectue un travail lorsque la fenêtre enfant s'ouvre. .load est appelé seulement la première fois lorsque j'ouvre la fenêtre et si je ne ferme pas la fenêtre, alors .load ne sera plus appelé. Cependant, .ready est appelé à chaque fois, que la fenêtre enfant soit fermée ou non. 

0
Praveen Singh