jqueryのevent_jqueryのready()メソッドの使い方を詳しく解説

ページの初期化では、$(document).ready(function(){//code}) または $(window).load(function(){//code});

それらの違いは、ready は DOM 構造が読み込まれた後にトリガーされ、load はページ内の DOM 構造、CSS、JS、画像などが読み込まれた後にトリガーされることです。明らかに、ready はページの初期化に適しています。 。しかし、常にそうとは限らない場合もあります。内部メカニズムをさらに詳しく調べる必要があります。

では、ready は DOM 構造がロードされたことを内部的にどのように判断するのでしょうか?そして、異なるブラウザはそれをどのように判断するのでしょうか?

jquery のバージョンが jquery-1.11.3.js であると仮定すると、答えは jquery コード内にあります。

ready のキー コード (行 3507 ～ 3566)。キー コードは赤でマークされています:

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

上記のコードは、ready がトリガーされると 2 つの部分に分割できます

1. 標準ブラウザでトリガーします

ブラウザが標準ブラウザに基づいている場合、DOM 構造のロード後に「DOMContentLoaded」イベントがトリガーされ、jquery は内部でこのイベントを準備完了のトリガー ソースとして使用します。

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

2. IE ブラウザーでのトリガー

ブラウザが IE の場合、IE (これはとても面倒で強力です) は「DOMContentLoaded」イベントをサポートしていないため、別の方法を見つける必要があります。

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

IEでの方法は、上記コードの赤字部分の「document.documentElement.doScroll("left")」メソッドを使用してページをスクロールします。ロードされていない場合は、50ミリ秒待ってスクロールを続けます。スクロールするまで押し続けて、トリガーの準備が完了します。

ただし、ページ内にフレームがある場合は、readyのトリガーソースとしてwindow.onloadイベントが使用されます。

IE では、ページ内にフレームがある場合、ページ内のすべてのコンテンツが読み込まれるまで、ready はトリガーされません。

jQuery のready イベントとload イベントの違い

仕事で jQuery を使用する場合は、使用する前にこれを行う必要があります:

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

次のように書かれることもあります:

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

一方は準備完了、もう一方はロードです。この 2 つの違いは何ですか?今日は話しましょう。
レディとロードのどちらが先に実行されるか:

面接プロセス中に、誰もがよく質問されます:ready とload のどちらが先に実行され、どちらが後に実行されますか?答えは、ready が最初に実行され、load が後で実行されるということです。
DOM ドキュメントをロードする手順:

ready が最初に実行され、load が後で実行される理由を理解するには、まず DOM ドキュメントをロードする手順について説明する必要があります。

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

上記の説明から、ステップ(4)が完了した後にreadyが実行されることが理解できたはずです。ただし、手順(6)が完了するまでロードは実行されません。

準備完了イベント:

ready イベントは、DOM 構造が描画された後に実行されます。これにより、多数のメディア ファイルが読み込まれていない場合でも、JS コードを実行できることが保証されます。

ロードイベント:

load イベントは、Web ページ内のすべてのコンテンツが読み込まれるまで待ってから実行する必要があります。 Web ページに多数の画像がある場合、Web ページのドキュメントはレンダリングされましたが、Web ページのデータが完全にはロードされていないため、load イベントをすぐにトリガーできないという状況が発生します。

概要:

皆さんはすでにreadyとloadの違いを理解していると思いますが、実際、ページ内に写真などのメディアファイルが存在しない場合、readyとloadはほぼ同じですが、ページ内にファイルがある場合は異なります。 , そのため、引き続きすべての人に取り組むことをお勧めします Ready は中国語で使用されます。