Différence entre les fonctions $ (window) .load () et $ (document) .ready ()

216

Quelle est la différence entre $(window).load(function() {})et $(document).ready(function() {})dans jQuery?

jquery Satya
la source

Réponses:

266
  • document.readyest un événement jQuery, il s'exécute lorsque le DOM est prêt, par exemple tous les éléments doivent être trouvés / utilisés, mais pas nécessairement tout le contenu .
  • window.onloadse déclenche plus tard (ou en même temps dans les pires / échecs) lorsque les images et autres sont chargées, donc si vous utilisez des dimensions d'image par exemple, vous souhaiterez souvent l'utiliser à la place.
Nick Craver
la source
38
raccourci pour $(document).ready(function(){})is $(function(){})et une autre différence importante par rapport à window.load est qu'il s'exécutera sur TOUS les futurs appels de la fonction, même après le DOMready initial.
Michael Butler
2
@dbliss Oui, je pense que l'onload est un raccourci pour $(window).on('load'). Les deux référençant l' événement de chargement .
Lancer gratuit
5
@MichaelButler - Que voulez-vous dire it will run on ALL future calls of the function?
BornToCode
7
@MichaelButler: Vous devez être plus clair dans votre commentaire. 1) Vous parlez de l'UTILISATEUR exécutant plus de $(document).readycode une fois que le DOM est prêt. C'est un si petit cas d'utilisation qu'il ne valait probablement pas la peine de confondre tout le monde avec le mentionner. 2) L'ENVIRONNEMENT n'appelle $(document).ready(f‌​unction(){})qu'une seule fois, lorsque le DOM est prêt. Si l'utilisateur, pour une raison quelconque, exécute davantage une $(document).readyfois que le DOM est prêt, alors oui, il sera exécuté immédiatement.
Doug S
4
Je vous prie de différer, Michael. Restons-en là et ne nous dégradons pas en commentaires inutiles. Au moins, les gens confus ont maintenant leur réponse.
Doug S
73 
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});
SagarPPanchal
la source
22

Le $(window).load()n'est PAS disponible dans jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

Pour le contourner, vous pouvez l'utiliser comme une "pièce jointe de gestionnaire d'événements" 

$( window ).on("load", function() {
        // Handler for .load() called.
});
Kean Amaral
la source
14

Les différences sont:

$(document).ready(function() { est un événement jQuery qui est déclenché lorsque le DOM est chargé, il est donc déclenché lorsque la structure du document est prête.

$(window).load() l'événement est déclenché après le chargement de tout le contenu.

Bharat Chodvadiya
la source
9 
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load sera déclenché après le chargement de tout le contenu iframe

Shaik Rasool
la source
7

$(document).ready se produit lorsque tous les éléments sont présents dans le DOM, mais pas nécessairement tout le contenu.

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

window.onloadou $(window).load()se produit après que toutes les ressources de contenu (images, etc.) ont été chargées.

$(window).load(function() {
    alert("window is loaded");
});
Purvik Dhorajiya
la source
0

document.ready (jQuery) document.ready s'exécutera juste après que le document HTML est chargé, et que le DOM soit prêt.

DOM: Le modèle d'objet de document (DOM) est une convention multiplateforme et indépendante du langage pour représenter et interagir avec des objets dans des documents HTML, XHTML et XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (JavaScript intégré) Le window.load attendra cependant que la page soit entièrement chargée, cela inclut les cadres internes, les images, etc. * window.load est une méthode JavaScript intégrée, il est connu pour en avoir bizarreries dans les anciens navigateurs (IE6, IE8, anciennes versions FF et Opera) mais fonctionnent généralement dans chacun d'eux.

window.load peut être utilisé dans l'événement onload du corps comme ceci (mais je vous suggère fortement d'éviter de mélanger du code comme celui-ci dans le HTML, car c'est une source de confusion plus tard):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});
Arun Kumar
la source
0

$ (window) .load est un événement qui se déclenche lorsque le DOM et tout le contenu (tout) de la page est entièrement chargé comme CSS, images et cadres. Un meilleur exemple est si nous voulons obtenir la taille réelle de l'image ou obtenir les détails de tout ce que nous utilisons.

$ (document) .ready () indique que le code qu'il contient doit être exécuté une fois le DOM chargé et prêt à être manipulé par le script. Il n'attendra pas le chargement des images pour exécuter le script jQuery.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (fenêtre) .load déclenché après $ (document) .ready ().

$ (window) .load a été déprécié en 1.8 et supprimé dans jquery 3.0

Srikrushna
la source
0

Je pense que l' $(window).loadévénement n'est pas pris en charge par JQuery 3.x

user8816619
la source
1
Selon la documentation, l'événement $ (window) .load a été supprimé dans JQuery 3.0
Mathieu VIALES
1
C'est correct. Pour le contourner, vous pouvez l'utiliser comme "Attachement du gestionnaire d'événements": $ (window) .on ("load", function () {// Gestionnaire pour .load () appelé.});
Kean Amaral
0

Selon les événements DOM niveau 2, l' loadévénement est censé se déclencher document, et non pas window. Cependant, loadest implémenté windowdans tous les navigateurs pour une compatibilité ascendante.

Jones Agyemang
la source