window.onload vs $ (document) .ready ()

Réponses:

1243

L' readyévénement se produit après le chargement du document HTML, tandis que l' onloadévénement se produit plus tard, lorsque tout le contenu (par exemple, les images) a également été chargé.

L' onloadévénement est un événement standard dans le DOM, tandis que l' readyévénement est spécifique à jQuery. Le but de l' readyévénement est qu'il se produise le plus tôt possible après le chargement du document, afin que le code qui ajoute des fonctionnalités aux éléments de la page n'ait pas à attendre que tout le contenu soit chargé.

Guffa
la source
153
@baptx: vous vous trompez. L' readyévénement est spécifique à jQuery. Il utilise l' DOMContentLoadedévénement s'il est disponible dans le navigateur, sinon il l'émule. Il n'y a pas d'équivalent exact dans le DOM car l' DOMContentLoadedévénement n'est pas pris en charge dans tous les navigateurs.
Guffa
18
Ok mais le même résultat existe avec DOMContentLoaded, peut-être auriez-vous dû le spécifier
baptx
55
@baptx: Je ne pensais pas que c'était pertinent par rapport à la question, et je ne le pense toujours pas.
Guffa
17
Pourquoi le downvote? Si vous n'expliquez pas ce que vous pensez être faux, cela ne peut pas améliorer la réponse.
Guffa
4
Il n'y a aucun événement tel que onload. onloadest le nom d'une propriété d'objet qui stocke une fonction à appeler lorsque l' loadévénement est déclenché.
Scott Marcus
140

window.onloadest l'événement JavaScript intégré, mais comme son implémentation avait de subtiles bizarreries sur tous les navigateurs (Firefox, Internet Explorer 6, Internet Explorer 8 et Opera ), jQuery fournit document.ready, qui les résume et se déclenche dès que le DOM de la page est prêt (n'attend pas les images, etc.).

$(document).ready(notez que ce n'est pas le cas document.ready , ce qui n'est pas défini) est une fonction jQuery, encapsulant et fournissant une cohérence aux événements suivants:

  • document.ondomcontentready/ document.ondomcontentloaded- un nouvel événement qui se déclenche lorsque le DOM du document est chargé (ce qui peut prendre un certain temps avant le chargement des images, etc.); encore une fois, légèrement différent dans Internet Explorer et dans le reste du monde
  • et window.onload(qui est implémenté même dans les anciens navigateurs), qui se déclenche lorsque la page entière se charge (images, styles, etc.)
Piskvor a quitté le bâtiment
la source
16
Il y a une légère idée fausse ici: l' loadévénement de windowest implémenté de manière raisonnablement cohérente entre les navigateurs. Le problème que jQuery et d'autres bibliothèques tentent de résoudre est celui que vous avez mentionné, à savoir que l' loadévénement n'est pas déclenché tant que toutes les ressources dépendantes telles que les images et les feuilles de style n'ont pas été chargées, ce qui peut être long après le chargement complet du DOM, rendu et prêt pour l'interaction. L'événement qui se déclenche dans la plupart des navigateurs lorsque le DOM est prêt est appelé DOMContentLoaded, non DOMContentReady.
Tim Down
2
@Tim Down: est raisonnablement le mot clé ici; au moins certains reniflements d'objets étaient nécessaires, même avec onload(il existe des différences par rapport à FF / IE / Opera). Quant au DOMContentLoaded, vous avez tout à fait raison. Modification pour clarifier.
Piskvor a quitté le bâtiment le
De quel type d'objet reniflant voulez-vous dire?
Tim Down
1
@Tim Down: Je sais que Opera l' avait , mais le déclencheur d'événement était légèrement décalé (pour se déclencher de manière fiable, il document.onloadétait utilisable). En ce qui concerne le window.onload: window.onload = fn1;window.onload=fn2;- seul fn2 serait invoqué onload. Certains hébergeurs gratuits insèrent leur propre code dans les documents, et cela a parfois gêné le code de la page.
Piskvor a quitté le bâtiment le
1
L'écriture de "document.ready" n'est-elle pas incorrecte? l'objet document n'a pas de méthode prête, l'objet jQuery le fait qui est renvoyé par l'appel $ (document). Veuillez modifier cette réponse si j'ai raison, car c'est très déroutant.
A. Sallai
87

$(document).ready()est un événement jQuery. La $(document).ready()méthode de JQuery est appelée dès que le DOM est prêt (ce qui signifie que le navigateur a analysé le HTML et construit l'arborescence DOM). Cela vous permet d'exécuter du code dès que le document est prêt à être manipulé.

Par exemple, si un navigateur prend en charge l'événement DOMContentLoaded (comme le font de nombreux navigateurs non IE), il se déclenchera sur cet événement. (Notez que l'événement DOMContentLoaded a été ajouté uniquement à IE dans IE9 +.)

Deux syntaxes peuvent être utilisées pour cela: 

$( document ).ready(function() {
   console.log( "ready!" );
});

Ou la version abrégée:

$(function() {
   console.log( "ready!" );
});

Points principaux pour $(document).ready():

  • Il n'attendra pas le chargement des images.
  • Utilisé pour exécuter JavaScript lorsque le DOM est complètement chargé. Mettez les gestionnaires d'événements ici.
  • Peut être utilisé plusieurs fois.
  • Remplacez $par jQuerylorsque vous recevez «$ n'est pas défini».
  • Non utilisé si vous souhaitez manipuler des images. Utilisez $(window).load()plutôt.

window.onload()est une fonction JavaScript native. L' window.onload()événement se déclenche lorsque tout le contenu de votre page est chargé, y compris le DOM (modèle d'objet de document), les bannières publicitaires et les images. Une autre différence entre les deux est que, bien que nous puissions avoir plus d'une $(document).ready()fonction, nous ne pouvons avoir qu'une seule onloadfonction.

James Drinkard
la source
4
Point mineur: la discussion sur IE est mal formulée. Ce n'est pas qu'IE (8 et avant) "ne peut pas se déclencher en toute sécurité" jusqu'à ce que le readyState du document atteigne la fin, c'est qu'IE manquait un événement DOMContentLoaded. Pas une question de "sécurité", mais une fonctionnalité manquante dans IE, ajoutée dans IE 9.
ToolmakerSteve
Vous avez raison, j'ai donc modifié la réponse pour refléter votre commentaire et merci!
James Drinkard
Vous dites "Il n'attendra pas que les images soient chargées." qu'en est-il des autres fichiers, js le plus important? Souvent, avant d'appeler la fonction à partir d'un autre fichier - j'ai besoin de savoir s'il est chargé.
Darius.V
C'est un tout autre sujet, mais si je comprends ce que vous demandez, il est basé sur la façon dont vous structurez votre page, y compris l'ordre dans lequel vous placez les fichiers js. Voici un lien qui va plus en détail: ablogaboutcode.com/2011/06/14/… HTH, James
James Drinkard
Pourquoi quelqu'un voudra-t-il utiliser $ (document) .ready () plusieurs fois?
Usman
43

Un événement de chargement Windows se déclenche lorsque tout le contenu de votre page est entièrement chargé, y compris le contenu DOM (modèle d'objet de document) et JavaScript asynchrone , les cadres et les images . Vous pouvez également utiliser body onload =. Les deux sont identiques; window.onload = function(){}et <body onload="func();">sont différentes façons d'utiliser le même événement.

L'$document.ready événement de fonction jQuery s'exécute un peu plus tôt window.onloadet est appelé une fois que le DOM (modèle d'objet Document) est chargé sur votre page. Il n'attendra pas que les images, les cadres soient complètement chargés .

Tiré de l'article suivant: comment $document.ready()est différent dewindow.onload()

Vivek
la source
Je pense que c'est la meilleure réponse!
Haoyu Chen
3
Je pourrais être d'accord, si ce n'était pas copié mot à mot.
Kevin B
23 

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Développer l'extrait

dev4092
la source
22

Un mot d'avertissement sur l'utilisation $(document).ready()avec Internet Explorer. Si une requête HTTP est interrompue avant le chargement de l'intégralité du document (par exemple, lorsqu'une page est diffusée en continu vers le navigateur, un autre lien est cliqué), IE déclenchera la$(document).ready événement.

Si un code de l' $(document).ready()événement fait référence à des objets DOM, il est possible que ces objets ne soient pas trouvés et des erreurs Javascript peuvent se produire. Soit gardez vos références à ces objets, soit différez le code qui référence ces objets à l'événement window.load.

Je n'ai pas pu reproduire ce problème dans d'autres navigateurs (spécifiquement, Chrome et Firefox)

plate-forme
la source
Quelle version d'IE? Je sais que je devrais me soucier de la compatibilité, mais c'est difficile avec IE. Est-il acceptable d'utiliser document.ready pour seulement JavaScript?
Monica
1
IE6, 7 et 8. Voir: stackoverflow.com/questions/13185689/…
James Drinkard
22

Un petit conseil:

Utilisez toujours le window.addEventListenerpour ajouter un événement à la fenêtre. Parce que de cette façon, vous pouvez exécuter le code dans différents gestionnaires d'événements.

Code correct:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})
Développer l'extrait

Code invalide:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}
Développer l'extrait

En effet, onload n'est que la propriété de l'objet, qui est écrasé.

Par analogie avec addEventListener, il est préférable d'utiliser $(document).ready()plutôt que de charger.

Илья Зеленько
la source
3
Cela ne répond pas à la question posée.
17

Événements

$(document).on('ready', handler)se lie à l'événement ready de jQuery. Le gestionnaire est appelé lorsque le DOM est chargé . Des éléments comme des images manquent peut-être encore . Il ne sera jamais appelé si le document est prêt au moment de la reliure. jQuery utilise DOMContentLoaded -Event pour cela, en l'émulant s'il n'est pas disponible.

$(document).on('load', handler)est un événement qui sera déclenché une fois que toutes les ressources seront chargées à partir du serveur. Les images sont chargées maintenant. Bien que l' onload soit un événement HTML brut, ready est construit par jQuery.

Les fonctions

$(document).ready(handler)est en fait une promesse . Le gestionnaire sera appelé immédiatement si le document est prêt au moment de l'appel. Sinon, il se lie à ready-Event.

Avant jQuery 1.8 , $(document).load(handler)existait comme alias de $(document).on('load',handler).

Lectures complémentaires

abstraktor
la source
pouvez-vous expliquer que $ (document) .load (gestionnaire) se comporte de la même manière que la liaison à l'événement de chargement. Contrairement à $ .fn.ready, il n'appellera pas immédiatement?
Nabeel Khan
Je pense que vous vous êtes trompé $.fn.loadcar cela ne se comporte plus comme un classeur d'événements. En fait, il est obsolète depuis jquery 1.8. Je l'ai mis à jour en conséquence
abstraktor
16

Il $(document).ready()s'agit d'un événement jQuery qui se produit lorsque le document HTML a été entièrement chargé, tandis que l' window.onloadévénement se produit plus tard, lorsque tout, y compris les images de la page, est chargé.

Window.onload est également un événement javascript pur dans le DOM, tandis que l' $(document).ready()événement est une méthode dans jQuery.

$(document).ready() est généralement le wrapper de jQuery pour s'assurer que tous les éléments chargés sont utilisés dans jQuery ...

Regardez le code source de jQuery pour comprendre comment cela fonctionne:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

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

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

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

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

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

J'ai également créé l'image ci-dessous comme référence rapide pour les deux:

entrez la description de l'image ici

Alireza
la source
1
beau, se référer aux docs est un point positif .. thnx
Irf
13

window.onload: un événement JavaScript normal.

document.ready: un événement jQuery spécifique lorsque tout le code HTML a été chargé.

Amir Mehdi Delta
la source
11

Une chose à retenir (ou devrais-je dire rappeler) est que vous ne pouvez pas empiler onloadcomme vous le pouvez ready. En d'autres termes, jQuery magic autorise plusieurs readys sur la même page, mais vous ne pouvez pas le faire avec onload.

Le dernier onloadannulera tout article précédent onload.

Une bonne façon de gérer cela est d' utiliser une fonction apparemment écrite par un Simon Willison et décrite dans Utilisation de plusieurs fonctions de chargement JavaScript .

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});
Donald A Nummer Jr
la source
11

Document.ready(un événement jQuery) se déclenche lorsque tous les éléments sont en place, et ils peuvent être référencés dans le code JavaScript, mais le contenu n'est pas nécessairement chargé. Document.readys'exécute lorsque le document HTML est chargé.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Le window.loadva cependant attendre que la page soit complètement chargée. Cela inclut les cadres intérieurs, les images, etc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});
Mike Clark
la source
5

L'événement document.ready se produit lorsque le document HTML a été chargé, et l' window.onloadévénement se produit toujours plus tard, lorsque tout le contenu (images, etc.) a été chargé.

Vous pouvez utiliser l' document.readyévénement si vous souhaitez intervenir "tôt" dans le processus de rendu, sans attendre le chargement des images. Si vous avez besoin que les images (ou tout autre "contenu") soient prêtes avant que votre script "fasse quelque chose", vous devez attendrewindow.onload .

Par exemple, si vous implémentez un modèle de "diaporama" et que vous devez effectuer des calculs en fonction de la taille des images, vous souhaiterez peut-être attendre window.onload. Sinon, vous pourriez rencontrer des problèmes aléatoires, selon la vitesse de chargement des images. Votre script s'exécuterait simultanément avec le thread qui charge les images. Si votre script est suffisamment long ou que le serveur est assez rapide, vous ne remarquerez peut-être pas de problème si les images arrivent à temps. Mais la pratique la plus sûre serait de permettre le chargement des images.

document.ready pourrait être un bon événement pour vous de montrer un signe "chargement ..." aux utilisateurs, et window.onload , vous pouvez terminer tout script qui nécessitait des ressources chargées, puis supprimer enfin le signe "Chargement ...".

Exemples :-

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;
Nimesh khatri
la source
2

window.onloadest une fonction intégrée à JavaScript. window.onloaddéclencher lorsque la page HTML est chargée. window.onloadne peut être écrit qu'une seule fois.

document.readyest une fonction de la bibliothèque jQuery. document.readyse déclenche lorsque le HTML et tout le code JavaScript, CSS et les images inclus dans le fichier HTML sont complètement chargés. document.readypeut être écrit plusieurs fois selon les besoins.

Amit
la source
"window.onload est une fonction" est incorrect car @ Илья-Зеленько démontre qu'il s'agit d'une propriété et non d'une fonction. Détails: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… tandis que .ready () est une fonction et attend un gestionnaire.
vik
1

Quand vous dites $(document).ready(f), vous dites au moteur de script de faire ce qui suit:

  1. récupérez le document objet et poussez-le, car il n'est pas dans la portée locale, il doit faire une recherche de table de hachage pour trouver où se trouve le document, heureusement le document est lié globalement donc c'est une simple recherche.
  2. trouver l'objet $ et sélectionnez-le, car il n'est pas de portée locale, il doit effectuer une recherche de table de hachage, qui peut ou non avoir des collisions.
  3. rechercher l'objet f dans la portée globale, qui est une autre recherche de table de hachage, ou pousser l'objet fonction et l'initialiser.
  4. appel readyde l'objet sélectionné, qui implique une autre recherche de table de hachage dans l'objet sélectionné pour trouver la méthode et l'invoquer.
  5. terminé.

Dans le meilleur des cas, il s'agit de 2 recherches de table de hachage, mais cela ignore le lourd travail effectué par jQuery, où $ trouve l'évier de cuisine de toutes les entrées possibles de jQuery, donc une autre carte est susceptible de distribuer la requête au gestionnaire correct.

Alternativement, vous pouvez faire ceci:

window.onload = function() {...}

Qui va

  1. trouver la fenêtre d'objet dans une portée globale, si le JavaScript est optimisé, il saura que puisque la fenêtre n'est pas modifiée, elle a déjà l'objet sélectionné, donc rien à faire.
  2. objet de fonction est poussé sur la pile d'opérandes.
  3. vérifier s'il onloads'agit d'une propriété ou non en faisant une recherche de table de hachage, car elle l'est, elle est appelée comme une fonction.

Dans le meilleur des cas, cela coûte une seule recherche de table de hachage, ce qui est nécessaire car onloaddoit être récupéré.

Idéalement, jQuery compilerait leurs requêtes en chaînes qui peuvent être collées pour faire ce que vous vouliez que jQuery fasse mais sans la distribution d'exécution de jQuery. De cette façon, vous avez le choix entre

  1. faire une répartition dynamique de jquery comme nous le faisons aujourd'hui.
  2. demandez à jQuery de compiler votre requête en une chaîne JavaScript pure qui peut être transmise à eval pour faire ce que vous voulez.
  3. copiez le résultat de 2 directement dans votre code et évitez le coût de eval.
Dmitry
la source
0

window.onload est fourni par l'api DOM et il dit "l'événement de chargement se déclenche lorsqu'une ressource donnée a été chargée".

"L'événement de chargement se déclenche à la fin du processus de chargement du document. À ce stade, tous les objets du document se trouvent dans le DOM, et toutes les images, scripts, liens et sous-cadres ont fini de se charger." Charge DOM

Mais dans jQuery $ (document) .ready () ne s'exécutera que lorsque la page Document Object Model (DOM) sera prête pour l'exécution du code JavaScript. Cela ne comprend pas les images, scripts, etc. iframes jquery événement prêt

La méthode jquery ready s'exécutera donc plus tôt que l'événement dom onload.

andyCao
la source