web-dev-qa-db-fra.com

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

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

javascriptjqueryjavascript-eventsunobtrusive-javascript
1186
Vaibhav Jain

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

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

1190
Guffa

window.onload est l'événement JavaScript intégré, mais son implémentation avait de subtiles particularités des 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 d'images, etc.).

$(document).ready (notez que c'est pas document.ready, qui n'est pas défini) est une fonction jQuery, qui enveloppe et fournit cohérence avec les événements suivants:

  • document.ondomcontentready/document.ondomcontentloaded - un événement newish qui se déclenche lorsque le DOM du document est chargé (ce qui peut prendre un certain temps avant les images , etc. sont chargés); encore une fois, légèrement différent dans Internet Explorer et dans le reste du monde
  • et window.onload (qui est mis en œuvre même dans les anciens navigateurs), qui se déclenche lorsque la page entière est chargée (images, styles, etc.)
132
Piskvor

$(document).ready() est un événement jQuery. La méthode $(document).ready() de JQuery est appelée dès que le DOM est prêt (ce qui signifie que le navigateur a analysé le code 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 alors sur cet événement. (Notez que l'événement DOMContentLoaded n'a été ajouté qu'à 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 que les images soient chargées.
  • 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 jQuery lorsque vous recevez "$ n'est pas défini."
  • Non utilisé si vous souhaitez manipuler des images. Utilisez $(window).load() à la place.

window.onload() est une fonction JavaScript native. L'événement window.onload() se déclenche lorsque tout le contenu de votre page a été chargé, y compris le DOM (modèle d'objet 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 fonction $(document).ready(), nous ne pouvons avoir qu'une seule fonction onload.

85
James Drinkard

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

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

Tiré de l'article suivant: en quoi $document.ready() est différent de window.onload()

42
Vivek

Avertissement concernant l’utilisation de $(document).ready() avec Internet Explorer. Si une requête HTTP est interrompue avant tout le document est chargé (par exemple, lorsqu'une page est en streaming sur le navigateur, un autre lien est cliqué) IE déclenchera la $(document).ready un événement.

Si un code de l'événement $(document).ready() fait référence à des objets DOM, il est possible que ces objets soient introuvables, et des erreurs Javascript peuvent se produire. Protégez vos références à ces objets ou ajustez 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).

22
deck
$(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>
20
dev4092

Événements

$(document).on('ready', handler) se lie à l'événement ready de jQuery. Le gestionnaire est appelé lorsque le DOM est chargé . Des ressources telles que des images sont peut-être toujours manquantes . Il ne sera jamais appelé si le document est prêt au moment de la reliure. jQuery utilise l'événement DOMContentLoaded - 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 sont chargées à partir du serveur. Les images sont chargées maintenant. Alors que onload est un événement HTML brut, ready est construit par jQuery.

Les fonctions

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

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

Lectures complémentaires

16
abstraktor

Un petit conseil:

toujours utilisez le window.addEventListener pour 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!')
})

Code non valide:

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

window.onload = function () {
  alert('Bye!') 
}

En effet, onload est simplement 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 se charger.

15
Илья Зеленько

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

Window.onload est également un événement javascript pur dans le DOM, tandis que l'événement $(document).ready() 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 seront utilisés dans jQuery ...

Regardez le code source de jQuery pour comprendre son fonctionnement:

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;
};

Aussi, j'ai créé l'image ci-dessous comme une référence rapide pour les deux:

enter image description here

13
Alireza

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

document.ready: Un événement jQuery spécifique lorsque l'ensemble du code HTML a été chargé.

12
Amir Mehdi Delta

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

Le dernier onload annulera tout précédent onloads.

Une bonne façon de gérer cela consiste à utiliser une fonction apparemment écrite par un certain Simon Willison et décrite dans tilisation 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 */
});
11
Donald A Nummer Jr

Document.ready (un événement jQuery) se déclenchera lorsque tous les éléments seront en place. Ils pourront être référencés dans le code JavaScript, mais le contenu ne sera 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 attendra toutefois 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
Mike Clark

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

Vous pouvez utiliser l'événement document.ready 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 attendre jusqu'à window.onload.

Par exemple, si vous implémentez un motif "Diaporama" et que vous devez effectuer des calculs en fonction de la taille de l'image, vous pouvez attendre jusqu'à window.onload. Sinon, vous pourriez rencontrer des problèmes aléatoires, en fonction de la vitesse de chargement des images. Votre script serait exécuté simultanément avec le fil 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 aux images d’être chargées.

document.ready pourrait être un événement agréable pour vous de montrer un signe de "chargement ..." aux utilisateurs, puis sur window.onload, vous pouvez terminer tous les scripts nécessitant le chargement de ressources, puis supprimer le "Chargement ..." signe.

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;
5
Nimesh khatri

window.onload est une fonction JavaScript intégrée. window.onload déclenche lorsque la page HTML est chargée. window.onload ne peut être écrit qu'une seule fois.

document.ready est une fonction de la bibliothèque jQuery. document.ready se déclenche lorsque HTML et tous les codes JavaScript, CSS et images inclus dans le fichier HTML sont complètement chargés. document.ready peut être écrit plusieurs fois en fonction des besoins.

2
Amit

Lorsque vous dites $(document).ready(f), vous indiquez au moteur de script de procéder comme suit:

  1. obtenir le document objet et le pousser, car il ne fait pas partie de la portée locale, il doit faire une recherche dans une table de hachage pour trouver où se trouve le document. Heureusement, le document est lié globalement, il s'agit donc d'une recherche unique.
  2. recherchez l'objet $ et sélectionnez-le. Comme il ne fait pas partie de la portée locale, il doit effectuer une recherche dans la table de hachage, ce qui peut entraîner des conflits ou non.
  3. recherchez l'objet f dans la portée globale, qui est une autre recherche dans une table de hachage, ou un objet de fonction Push, puis initialisez-le.
  4. appel ready de l'objet sélectionné, ce qui implique une autre recherche de table de hachage dans l'objet sélectionné pour rechercher la méthode et l'appeler.
  5. terminé.

Dans le meilleur des cas, il s'agit de 2 recherches dans une table de hachage, mais cela ne tient pas compte du travail lourd effectué par jQuery, où $ est l'évier de la cuisine de toutes les entrées possibles de jQuery. Il est donc probable qu'une autre carte envoie la requête gestionnaire correct.

Alternativement, vous pouvez faire ceci:

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

qui va

  1. recherchez la fenêtre de l'objet dans la portée globale. Si le code JavaScript est optimisé, il saura que, puisque la fenêtre n'est pas modifiée, l'objet sélectionné est déjà sélectionné, il n'y a donc rien à faire.
  2. objet de fonction est poussé sur la pile d'opérande.
  3. vérifie si onload est une propriété ou non en effectuant une recherche dans une table de hachage, puisque c'est le cas, elle s'appelle comme une fonction.

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

Idéalement, jQuery compilerait leurs requêtes en chaînes pouvant être collées pour faire ce que vous souhaitiez que jQuery fasse, mais sans la répartition à l'exécution de jQuery. De cette façon, vous avez le choix entre

  1. faire un envoi dynamique de jQuery comme nous le faisons aujourd'hui.
  2. demandez à jQuery de compiler votre requête en chaîne JavaScript pure pouvant être transmise à eval pour faire ce que vous voulez.
  3. copiez le résultat de 2 directement dans votre code et ignorez le coût de eval.
1
Dmitry

Prenons un scénario dans lequel vous avez deux vues partielles dans la page d'index.

Exemple 

    <div id="ReportHere" class="container-fluid">
        @Html.Action("ProjectAbc", "ProjectSalesVolume", new { reportType = "Projected Sales Volume", region = "Karachi", sector = "All" })
    </div>


@Html.Action("AbcFilters", "ProjectSalesVolume")

Maintenant, la page action de ProjectAbc contient un script dans la fonction window.onload

Exemple Graphique

window.onload = function () {

debugger;
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
    text: '@(Model.topTitleChart)'
},
axisY: {
    title:  '@(Model.leftTitleChart)'
},
data: [{
    type: "column",
    indexLabel: "{y}",
    indexLabelPlacement:"inside",
    dataPoints: @Html.Raw(Model.dataPoints)
    }]
 });
 chart.render();

 }

et l'action a une vue partielle de type retour.

  return PartialView("ProjectAbc", model);

Et la page de filtre a été rappelée à nouveau à ProjectAbc

Exemple 

@using (Ajax.BeginForm("ProjectAbc", new AjaxOptions { HttpMethod = "Post" }))
 {
      //property binding here
     <input type="submit" value="filter"/>

 }

Maintenant, après le chargement de la page pour la toute première fois, lorsque vous frappez le filtre depuis la vue du filtre (rendu avec ProjectAbc dans la page d'index), la méthode située dans window.onload ne sera pas appelée. Dans ce scénario, nous avons donc besoin de document.ready car window.onload est appelé une seule fois lors de l'actualisation de la page

0
TAHA SULTAN TEMURI