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


Quelles sont les différences entre JavaScript window.onload et jQuery $(document).ready() méthode?


1086
2017-09-13 06:24


origine


Réponses:


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

le onload événement est un événement standard dans les DOM, tandis que le ready L'événement est spécifique à jQuery. Le but de la ready L'événement est qu'il doit se produire 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 ne doive pas attendre que tout le contenu soit chargé.


1110
2017-09-13 06:28



window.onload est l'événement JavaScript intégré, mais comme sa mise en œuvre avait subtil bizarreries à travers les navigateurs (Firefox, Internet Explorer 6, Internet Explorer 8, et Opéra), jQuery fournit document.ready, qui les fait disparaître, 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 c'est ne pas  document.ready, qui est indéfini) est une fonction jQuery, enveloppant et fournissant cohérence aux événements suivants:

  • document.ondomcontentready / document.ondomcontentloaded - un événement nouveau qui se déclenche lorsque le DOM du document est chargé (ce qui peut prendre un certain temps avant les images, etc. sont chargées); 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 l'ensemble de la page se charge (images, styles, etc.)

123
2017-09-13 06:30



$(document).ready() est un événement jQuery. JQuery's $(document).ready() La méthode 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 n'a été ajouté à IE que 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 que les images soient chargées.
  • Utilisé pour exécuter JavaScript lorsque le DOM est complètement chargé. Placez les gestionnaires d'événements ici.
  • Peut être utilisé plusieurs fois.
  • Remplacer $ avec jQuery lorsque vous recevez "$ n'est pas défini".
  • Non utilisé si vous voulez manipuler des images. Utilisation $(window).load() au lieu.

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


78
2017-08-20 16:00



UNE Windows charger événement 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, images et images. Vous pouvez également utiliser body onload =. Les deux sont les mêmes; window.onload = function(){}et <body onload="func();"> sont différentes façons d'utiliser le même événement.

jQuery $document.ready événement de fonction s'exécute un peu plus tôt que window.onload et est appelée une fois que le DOM (Document Object Model) est chargé sur votre page. Il n'attendra pas le images, cadres pour obtenir pleine charge.

Extrait de l'article suivant: Comment $document.ready() est différent de window.onload()


38
2017-09-17 07:09



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

Si un code dans le $(document).ready() L'événement référence les objets DOM, il existe un risque que ces objets ne soient pas détectés et des erreurs Javascript peuvent survenir. Gardez vos références à ces objets, ou reportez le code qui référence ces objets à l'événement window.load.

Je n'ai pas été en mesure de reproduire ce problème dans d'autres navigateurs (en particulier, Chrome et Firefox)


21
2017-08-27 18:56



$(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>


18
2018-02-26 12:30



Événements

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

$(document).on('load', handler) est un événement qui sera tiré une fois tout les ressources sont chargées du serveur. Les images sont chargées maintenant. Tandis que en charge est un événement HTML brut, prêt est construit par jQuery.

Les fonctions

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

Avant jQuery 1.8, $(document).load(handler) existé comme un alias $(document).on('load',handler).

Lecture supplémentaire


15
2018-06-02 10:38



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

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


11
2018-03-03 06:52



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.ready s'exécute lorsque le document HTML est chargé.

$(document).ready(function() {

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

le window.load cependant, attendez que la page soit entièrement chargée. Cela inclut les cadres internes, les images, etc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

11
2017-11-07 20:54



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

Le dernier onload annulera toute précédente onloads.

Une bonne façon de traiter cela est avec une fonction apparemment écrite par un Simon Willison et décrite dans Utilisation de plusieurs fonctions JavaScript Onload.

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 */
});

8
2017-10-13 14:52