jQuery - Quelles sont les différences entre $ (document) .ready et $ (window) .load?

Quelles sont les différences entre

$(document).ready(function(){
 //my code here
});

et

$(window).load(function(){
  //my code here
});

Et je veux m'assurer que:

$(document).ready(function(){

}) 

et

$(function(){

}); 

et

jQuery(document).ready(function(){

});

sont identiques.

Pouvez-vous me dire quelles différences et similitudes entre eux?

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Version de Query 3.0

Changement de rupture: .load (), .unload () et .error () supprimés

Ces méthodes sont des raccourcis pour les opérations d'événement, mais présentaient plusieurs limitations d'API. La .load()méthode d' événement était en conflit avec la .load() méthode ajax . La .error()méthode n'a pas pu être utilisée avec en window.onerror raison de la façon dont la méthode DOM est définie. Si vous devez attacher des événements par ces noms, utilisez la .on()méthode, par exemple, passez $("img").load(fn)à $(img).on("load", fn). ¹

$(window).load(function() {});

Devrait être changé en

$(window).on('load', function (e) {})

Ce sont tous équivalents:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

document.readyest un événement jQuery, il s'exécute lorsque le DOM est prêt, par exemple tous les éléments sont là pour ê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 cas les plus graves / défaillants) lorsque les images et autres sont chargées. Donc, si vous utilisez des dimensions d'image par exemple, vous souhaitez souvent l'utiliser à la place.

Lisez également une question connexe:
Différence entre les fonctions $ (window) .load () et $ (document) .ready ()

À partir du document API jQuery

Bien que JavaScript fournisse l' loadévénement pour exécuter du code lorsqu'une page est rendue, cet événement ne se déclenche pas tant que tous les éléments tels que les images n'ont pas é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 transmis à .ready()est garanti pour ê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.

Dans les cas où le code repose sur des ressources chargées (par exemple, si les dimensions d'une image sont requises), le code doit être placé dans un gestionnaire pour l' loadévénement à la place.

Réponse à la deuxième question -

Non, ils sont identiques tant que vous n'utilisez pas jQuery en mode sans conflit.

Ces trois fonctions sont les mêmes.

$(document).ready(function(){

}) 

et

$(function(){

}); 

et

jQuery(document).ready(function(){

});

ici $est utilisé pour définir jQuerycomme $= jQuery.

Maintenant, la différence est que

$(document).readyest un événement jQuery qui est déclenché lorsqu'il DOMest chargé, il est donc déclenché lorsque la structure du document est prête.

$(window).load l'événement est déclenché après que le contenu entier soit chargé comme la page contient des images, css etc.

La différence entre les fonctions $(document).ready()et $(window).load()est que le code inclus à l'intérieur $(window).load()s'exécutera une fois que la page entière (images, iframes, feuilles de style, etc.) sera chargée tandis que l' événement document ready se déclenchera avant que toutes les images, iframes, etc. soient chargées, mais après tout le DOM lui-même est prêt.

$(document).ready(function(){

}) 

et

$(function(){

});

et

jQuery(document).ready(function(){

});

Il n'y a pas de différence entre les 3 codes ci-dessus.

Ils sont équivalents, mais vous pouvez être confronté à un conflit si d'autres cadres JavaScript utilisent le même symbole dollar $ comme nom de raccourci.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

L'événement ready est toujours exécuté lorsque la seule page html est chargée dans le navigateur et les fonctions sont exécutées .... Mais l'événement load est exécuté au moment où tout le contenu de la page est chargé dans le navigateur de la page ... .. nous pouvons utiliser $ ou jQuery lorsque nous utilisons la méthode noconflict () dans les scripts jquery ...

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

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

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Au-dessus de 3 sont identiques, $ est le nom d'alias de jQuery, vous pouvez être confronté à un conflit si d'autres cadres JavaScript utilisent le même symbole dollar $. Si vous êtes confronté à un conflit, l'équipe jQuery fournit une solution sans conflit. En savoir plus.

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