Explication détaillée de l'utilisation de la méthode ready() de jquery event_jquery

Dans l'initialisation de la page, $(document).ready(function(){//code}); ou $(window).load(function(){//code});

La différence entre eux est que ready est déclenché après le chargement de la structure DOM, et load est déclenché après le chargement de la structure DOM, des CSS, des js, des images, etc. de la page. Évidemment, ready est plus approprié pour l'initialisation de la page. . Mais parfois, ce n'est pas toujours le cas. Il faut approfondir ses mécanismes internes.

Alors, comment ready détermine-t-il en interne que la structure DOM a été chargée ? Et comment les différents navigateurs le jugent-ils ?

La réponse réside dans le code jquery, en supposant que la version de jquery est jquery-1.11.3.js.

Le code clé de prêt (lignes 3507~3566), le code clé est marqué en rouge :

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

Le code ci-dessus peut être divisé en deux parties lorsque prêt est déclenché

1. Déclencheur sous navigateur standard

Lorsque le navigateur est basé sur un navigateur standard, l'événement "DOMContentLoaded" sera déclenché après le chargement de la structure DOM jquery utilise en interne cet événement comme source de déclenchement de ready.

document.addEventListener( "DOMContentLoaded", completed, false );

2. Déclencheur sous le navigateur IE

Lorsque le navigateur est IE, parce qu'IE (qui est si douloureux et puissant) ne prend pas en charge l'événement "DOMContentLoaded", vous devez trouver un autre moyen,

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

La méthode sous IE consiste à utiliser la méthode "document.documentElement.doScroll("left")" dans le texte rouge du code ci-dessus pour faire défiler la page. Si elle n'est pas chargée, attendez 50 millisecondes et continuez à faire défiler. jusqu'à ce qu'il défile. Puis déclenchez prêt.

Cependant, s'il y a un cadre dans la page, l'événement window.onload sera utilisé comme source de déclenchement de ready.

Donc sous IE, lorsqu'il y a un cadre dans la page, le prêt ne sera déclenché que lorsque tout le contenu de la page sera chargé.

La différence entre les événements prêts et chargés dans jQuery

Lorsque vous utilisez jQuery au travail, vous devez le faire avant de l'utiliser :

//document ready
$(document).ready(function(){
  ...code...
})
//document ready 简写
$(function(){
  ...code...
})

Parfois ça s'écrit ainsi :

//document load
$(document).load(function(){
  ...code...
})

L'un est prêt et l'autre est chargé. Quelle est la différence entre les deux ? Parlons aujourd'hui.
Lequel est exécuté en premier, prêt ou chargé :

Au cours du processus d'entretien, on pose souvent une question à chacun : lequel des éléments ready et load est exécuté en premier, et lequel est exécuté plus tard ? La réponse est que ready est exécuté en premier et load est exécuté plus tard.
Étapes de chargement des documents DOM :

Pour comprendre pourquoi ready est exécuté en premier et load est exécuté plus tard, il faut d'abord parler des étapes de chargement des documents DOM :

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

Vous devriez avoir compris d'après la description ci-dessus que ready est exécuté une fois l'étape (4) terminée. Mais le chargement ne sera pas exécuté tant que l’étape (6) n’est pas terminée.

événement prêt :

L'événement ready est exécuté une fois la structure DOM dessinée. Cela garantit que même si un grand nombre de fichiers multimédias ne sont pas chargés, le code JS peut toujours être exécuté.

charger l'événement :

L'événement de chargement doit attendre que tout le contenu de la page Web soit chargé avant d'être exécuté. S'il y a un grand nombre d'images dans une page Web, cette situation se produira : le document de la page Web a été rendu, mais comme les données de la page Web n'ont pas été complètement chargées, l'événement de chargement ne peut pas être déclenché immédiatement.

Résumé :

Je crois que tout le monde comprend déjà la différence entre prêt et chargé. En fait, s'il n'y a pas de fichiers multimédias tels que des images dans la page, prêt et chargé sont presque les mêmes, mais c'est différent s'il y a des fichiers dans la page. , il est donc toujours recommandé à tout le monde de travailler sur Ready est utilisé en chinois.