web-dev-qa-db-fra.com

Raccourcis pour la méthode ready () de jQuery

J'ai vu quelques raccourcis pour la méthode ready () et je voudrais savoir ce qui se passe en premier, car mes résultats de test me confondent ..

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

$(window).load(function(){
    alert("window ready");
});

(function($){
    alert("self invoke");
})(jQuery);

Ici, l'invocation automatique se produit d'abord, puis le document, puis la fenêtre. La technique auto-invocation est-elle considérée comme une méthode ready ()?

jquerydocument-ready
44
Wilkins

La troisième option n'est pas un raccourci pour .ready() (ou vraiment jQuery), le self invoke s'exécute immédiatement (dès qu'il apparaît dans le code), ceci est probablement le raccourci auquel vous pensez:

$(function(){
  alert("I'm a ready shortcut");
});

Passer une fonction dans $(func) est un raccourci pour $(document).ready(func);. La version sans conflit ressemblerait à ceci:

jQuery(function($) {
  //$ is jQuery
});
98
Nick Craver

Nick Craver a raison dans ce qu'il dit, mais je pense qu'il convient de noter que dans ce dernier exemple, il ne fait rien du tout avec jquery. jQuery est passé en tant que paramètre à la fonction anonyme mais la fonction ne fait rien avec elle.

Le dernier exemple équivaut à:

(function(){
    alert("self invoke");
})();

Et clairement, cela appelle immédiatement la fonction anonyme dès que cette ligne de code est frappée et fait ainsi l'alerte. Il n'invoque pas du tout jQuery, c'est pourquoi Nick a raison quand il dit que ce n'est définitivement pas une méthode ready ().

13
Chris

Cet article a une bonne explication sur la façon dont les deux premiers sont différents:

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

jQuery propose deux méthodes puissantes pour exécuter du code et attacher des gestionnaires d'événements: $(document).ready et $(window).load. L'événement document ready s'exécute déjà lorsque le document HTML est chargé et que le DOM est prêt, même si tous les graphiques n'ont pas encore été chargés. Si vous souhaitez connecter vos événements pour certains éléments avant le chargement de la fenêtre, alors $(document).ready est le bon endroit.

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

L'événement de chargement de fenêtre s'exécute un peu plus tard lorsque la page complète est entièrement chargée, y compris tous les cadres, objets et images. Par conséquent, les fonctions qui concernent des images ou d'autres contenus de page doivent être placées dans l'événement de chargement de la fenêtre ou de la balise de contenu elle-même.

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