web-dev-qa-db-fra.com

Quelle est la différence entre $ (fenêtre) .load et $ (document) .ready?

J'ai eu récemment un problème avec mon CODE JavaScript et j'ai retiré une partie de mon code de ma $(document).ready() et l'ai mise dans $(window).load() a résolu le problème.

Je comprends maintenant que window.load Est tiré juste après document.ready, Mais pourquoi n'est-il pas prêt après document.ready, C'est-à-dire après window.load()?

javascriptjquerydocument-ready
67
Mark McCook

load est appelé lorsque tous les éléments sont chargés, y compris les images. ready est déclenché lorsque le DOM est prêt pour l'interaction.

Depuis le MDC, window.onload:

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 et sous-cadres ont fini de se charger.

Dans la documentation de l'API jQuery, . Ready (handler):

Bien que JavaScript fournisse l'événement de chargement pour exécuter le code lorsqu'une page est rendue, cet événement ne se déclenche que lorsque tous les actifs tels que les images ont été complètement reçus. Dans la plupart des cas, le script peut être exécuté dès que la hiérarchie DOM a été entièrement construite. Le gestionnaire passé à .ready () est garanti d'être exécuté une fois que le DOM est prêt, c'est donc généralement le meilleur endroit pour attacher tous les autres gestionnaires d'événements et exécuter un autre code jQuery. Lorsque vous utilisez des scripts qui dépendent de la valeur des propriétés de style CSS, il est important de référencer des feuilles de style externes ou d'incorporer des éléments de style avant de référencer les scripts.

73
Martin Jespersen

$(document).ready() signifie que le DOM de votre page est prêt à être manipulé.

window.load() est déclenchée lorsque la page entière (y compris les composants comme les fichiers CSS et image) a été complètement chargée.

Qu'essayez-vous d'accomplir?

26
Mario Fink
$(document).ready(function(){
//code here
});

Le code ci-dessus est utilisé presque à chaque fois que nous travaillons avec jQuery.

Ce code est utilisé lorsque nous voulons initialiser nos codes jQuery une fois que le DOM est prêt.

$(window).load()

Parfois, vous souhaitez manipuler des images. Par exemple, vous souhaitez aligner verticalement et horizontalement une image et vous devez obtenir la largeur et la hauteur de l'image pour ce faire. Avec $(document).ready() vous ne pourrez pas faire cela si le visiteur n'a pas l'image déjà chargée, auquel cas vous devez initialiser la fonction d'alignement jquery lorsque l'image se termine . C’est là que nous utilisons $(window).load()

8
SimonGates

$(document).ready est jQuery événement qui est déclenché lorsque 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 (y compris css, images, etc.).

C'est une différence majeure.

6
Bharat Chodvadiya

$(document).ready() enveloppe le DOM dans <body>...</body>

$(window).load() est papa de document envelopper tous les DOM dans <html>...</html>

Utilisons dans votre cas pour enregistrer le traitement de rendu.

4
xicooc

En termes simples, window.load est appelé lorsque tout le contenu de la fenêtre est chargé alors que document.ready est appelé lorsque DOM est chargé et que la structure du document est prête.

2
Yamini Upadhyay

  1. $ (document) .ready est un curseur rapide par rapport à $ (window) .load Event.

  2. $ (document) .ready est déclenché lorsque Dom est chargé mais $ (fenêtre) .load Événement se déclenche lorsque Dom, css et images sont complètement chargés.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
  <script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
    <script> 
        $(window).load(function () {          
            var img = $('#img1');
      alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());          
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">     
    <div>
        <img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
    </div>
    </form>
</body>
</html>
1
ankit sahu

L'état de chargement est l'état lorsque l'objet fenêtre a été créé et que tous les composants nécessaires, y compris DOM, ont été chargés en mémoire, mais n'ont pas été transmis au moteur de rendu pour le rendre dans la page.

L'état prêt, d'autre part, garantit que les éléments DOM, les événements et les autres composants dépendants sont transmis au moteur de rendu, rendus sur la page et prêts pour l'interaction et la manipulation.

1
asmitB