Detaillierte Erläuterung der Verwendung der ready()-Methode von jquery event_jquery

Bei der Seiteninitialisierung $(document).ready(function(){//code}); oder $(window).load(function(){//code});

Der Unterschied zwischen ihnen besteht darin, dass „Ready“ ausgelöst wird, nachdem die DOM-Struktur geladen wurde, und „Load“ ausgelöst wird, nachdem die DOM-Struktur, CSS, JS, Bilder usw. in der Seite geladen wurden. Offensichtlich ist „Ready“ besser für die Seiteninitialisierung geeignet . . Aber manchmal ist das nicht immer der Fall. Die internen Mechanismen müssen genauer untersucht werden.

Wie stellt Ready intern fest, dass die DOM-Struktur geladen wurde? Und wie beurteilen es verschiedene Browser?

Die Antwort liegt im JQuery-Code, vorausgesetzt, die Version von JQuery ist jQuery-1.11.3.js.

Der Schlüsselcode ist bereit (Zeilen 3507 bis 3566), der Schlüsselcode ist rot markiert:

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

Der obige Code kann in zwei Teile unterteilt werden, wenn die Bereitschaft ausgelöst wird

1. Auslösen unter Standardbrowser

Wenn der Browser auf einem Standardbrowser basiert, wird das Ereignis „DOMContentLoaded“ ausgelöst, nachdem die DOM-Struktur geladen wurde. JQuery verwendet dieses Ereignis intern als Auslöserquelle für „ready“.

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

2. Auslöser unter IE-Browser

Wenn der Browser ein IE ist, müssen Sie einen anderen Weg finden, weil der IE (der so mühsam und leistungsstark ist) das Ereignis „DOMContentLoaded“ nicht unterstützt,

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

Die Methode unter IE besteht darin, die Methode „document.documentElement.doScroll(„left“)“ im roten Text des obigen Codes zu verwenden, um die Seite zu scrollen. Wenn sie nicht geladen ist, warten Sie 50 Millisekunden und scrollen Sie weiter bis es scrollt. Dann Trigger bereit.

Wenn jedoch ein Frame auf der Seite vorhanden ist, wird das window.onload-Ereignis als Auslöserquelle für „Ready“ verwendet.

Wenn also unter IE ein Frame auf der Seite vorhanden ist, wird „Ready“ erst dann ausgelöst, wenn der gesamte Inhalt der Seite geladen ist.

Der Unterschied zwischen Ready- und Load-Ereignissen in jQuery

Wenn Sie jQuery bei der Arbeit verwenden, müssen Sie Folgendes tun, bevor Sie es verwenden:

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

Manchmal wird es so geschrieben:

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

Einer ist fertig und der andere ist geladen. Was ist der Unterschied zwischen den beiden? Lass uns heute reden.
Welches wird zuerst ausgeführt, bereit oder geladen:

Während des Vorstellungsgesprächs wird jedem oft eine Frage gestellt: Welche von „Bereit“ und „Laden“ wird zuerst und welche später ausgeführt? Die Antwort ist, dass „ready“ zuerst ausgeführt wird und „load“ später ausgeführt wird.
Schritte zum Laden von DOM-Dokumenten:

Um zu verstehen, warum „ready“ zuerst und „load“ später ausgeführt wird, müssen wir zunächst über die Schritte zum Laden von DOM-Dokumenten sprechen:

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

Anhand der obigen Beschreibung sollten Sie verstanden haben, dass „ready“ ausgeführt wird, nachdem Schritt (4) abgeschlossen ist. Der Ladevorgang wird jedoch erst ausgeführt, wenn Schritt (6) abgeschlossen ist.

bereites Ereignis:

Das Ready-Ereignis wird ausgeführt, nachdem die DOM-Struktur gezeichnet wurde. Dadurch wird sichergestellt, dass der JS-Code auch dann ausgeführt werden kann, wenn viele Mediendateien nicht geladen werden.

Ladeereignis:

Das Ladeereignis muss warten, bis der gesamte Inhalt der Webseite geladen ist, bevor es ausgeführt wird. Wenn eine Webseite eine große Anzahl von Bildern enthält, tritt folgende Situation auf: Das Webseitendokument wurde gerendert, aber da die Webseitendaten nicht vollständig geladen wurden, kann das Ladeereignis nicht sofort ausgelöst werden.

Zusammenfassung:

Ich glaube, jeder versteht bereits den Unterschied zwischen „Bereit“ und „Laden“. Tatsächlich sind „Bereit“ und „Laden“ fast dasselbe, wenn auf der Seite keine Mediendateien vorhanden sind, aber es ist anders, wenn auf der Seite Dateien vorhanden sind , daher wird es dennoch jedem empfohlen, daran zu arbeiten. Ready wird auf Chinesisch verwendet.