イベントは、ロードされたDOMドキュメントツリー(なしの画像、CSSなど)、それは負荷のトリガ・イベントよりも前だときに関数を実行する準備ができているとき。使用法:
- $(ドキュメント).ready(楽しい);楽しいがDOMツリーの後に実行される機能は、ロードされているとき、無名関数
jQuey内でも$(文書)jQueryオブジェクトを定義し、我々は上記の文言にある同じであるため省略形を持って準備ができて、直接、$(楽しい)ことができますを渡すことができます
readyイベントとウィンドウのonload差:
- readyイベント、およびアップロードが完了した後ので、DOMツリー上で実行することができます
- onloadイベント、他のすべてのWebリソースの後に実行するために(を含む画像、フラッシュ、オーディオ、ビデオ)をロードします
onloadイベントは、例えば、上の写真にバインドすることができます。
<!DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < タイトル>ドキュメント</ タイトル> < スクリプトSRC = "http://libs.baidu.com/jquery/1.11 0.1 / jquery.min.js」> </ スクリプト> </ ヘッド> < 身体> < IMG SRC = "https://www.cnblogs.com/images/logo_small.gif" ALT = "" > $(()=> はconsole.log(' DOMツリーがロードされている' )) // READYイベント $(' IMG ' ).on(' ロード' 、()=> はconsole.log(' 画像読み込み完了しました' )) // 画像のロードイベント $(ウィンドウ).on(「負荷」、()=> はconsole.log(「リソースがロードされている」)) // ページをロードするすべてのリソースが完了した後にイベント </ スクリプト> </ ボディ> </HTML >
次のようにここでは、出力をロードした後、我々は準備ができてイベント、のonloadイベントと画像上のウィンドウ上のonloadイベントにバインドされている、非常に単純なコードを書くために、矢印の関数を使用します:
まず、あなたが見ることができるすべてのイベント、onloadイベントの後、絵をトリガし、最終的に窓ののonloadイベントをトリガーする準備ができて、その後、すべてのリソースがロードされた上で、既にあります
ソースコード解析
文書上のjQueryのreadyイベントは、DOMContentLoadedイベントオブジェクトにバインドされ、彼はパッケージを見ていた、原則DOMContentLoadedイベントは、この資料に記載されて見ることで、非常に詳細な見ることができます。https://www.cnblogs.com /caizhenbo/p/6679478.html
jQueryのreadyイベントがこの接続で実現される機能のリストを見ることができる機能のリストに基づいています。https://www.cnblogs.com/greatdesert/p/11433365.html
私たちは、次のように最初のエントリの準備ができて関連付けられた論理モジュールで実行されます準備ができたら、イベントを実行するために$(楽しさ)を呼び出すとき:
INIT:関数(セレクタ、コンテキスト、rootjQuery){ VARの一致、ELEM、RET、DOC。 // $( "")、$(NULL)、または$(未定義の)ハンドル 場合(!セレクター){ 返す これを。 } // $(DOMElementの)を処理 する場合(selector.nodeType){ この .context = この [0] = セレクタ; この .LENGTH = 1 。 返す これを。 } // それを見つける最適化、本体要素が一度だけ存在する 場合(セレクタ===「本体」&&!コンテキスト&&document.body){ この .context = ドキュメント; これは [0] = ; document.body この .selector = セレクタ; この。.LENGTH = 1 ; 返す この; } // HTML文字列を処理する IF(typeof演算のセレクタ===「文字列" ){ / * 若干* / } 他 IF(jQuery.isFunction(セレクタ)){ // パラメータは、機能選択である場合、そのイベントを結合する準備ができている 戻り rootjQuery.ready(セレクタ); //引数としてrootjQuery.ready()メソッド、及びセレクタを行う } / * スキップ/ * }
次のようにrootjQuery jQueryのは、内部、jQueryの例は、ローカル変数が定義されます。
= jQueryのrootjQuery(ドキュメント); // ライン917、格納されたドキュメントオブジェクト参考例のjQuery
次のように入口モジュール参照rootjQuery.ready()メソッドは、(プロトタイプで定義されている)レディrootjQueryインスタンスオブジェクト上で実行されます。
= = jQuery.prototype jQuery.fn { レディ:関数(FN){ // でリスナーに取り付け jQuery.bindReady(); // 最初の実行jQuery.bindReady()結合readyイベント(実際には、結合がDOMContentLoadedされるか、またはonreadystatechangeにイベント) // コールバックで追加 readyList.add(FN); //は、関数リストがreadyListする機能を追加し 返し 、これを; } }
jQuery.bindReady()は、内部readyList初期化jQuery.Callbacks(「メモリ回」)関数オブジェクトリストイベントを結合するための静的メソッドであります
そして、内部の機能リストreadyListに機能を保存FN readyList.add(FN)を行います。
次のようにjQuery.bindReady()を達成:
jQuery.extend({ bindReady:関数(){ // 初期化準備イベントリスナー関数リストreadyList、およびドキュメントオブジェクトDOMContentLoadedの準備イベントリスナー一次関数的に結合 IF (readyList){ リターン; } readyList = jQuery.Callbacks(「メモリ一旦「); // 。コールjQuery.Callbacks(フラグ)readyイベントリスナー関数リストreadylist、一度渡し、メモリマーカーしばらく // WHERE $ケース(ドキュメント).readyを(キャッチ)はザ・がされた後に呼び出さ // ブラウザのイベントがすでに持っています。発生した IF(document.readystateで===「コンプリート」){ // ドキュメントの準備ができている場合は、jQuery.readyを呼び出す(待機)イベントリスナーは、機能一覧readyListを実行する準備ができて // IT非同期にする準備機会遅延で許可するスクリプトへのハンドル を返すのsetTimeout(jQuery.readyは、1); // のsetTimeout()非同期実行方法jQuery.ready(待機)で、他のスクリプトに準備ができて遅延トリガイベントを可能にします。 } // Mozillaの、オペラやWebKitのナイトリーは、このページを評価する現在、このイベントをサポートしています のIF(document.addEventListenerを){ // IE9 +でDOMContentLoadedイベントを結合して、ブラウザ上で // 使用イベントは、ハンディコールバックで document.addEventListener(「DOMContentLoaded」、DOMContentLoaded、偽 ;) // リスナー関数にドキュメントオブジェクトDOMContentLoadedイベントにバインドDOMContentLoaded //常に動作することを、window.onloadするフォールバック window.addEventListener(「負荷」、jQuery.ready、偽); // IEのイベントモデルを使用する場合は } それ以外の 場合(document.attachEvent){ // 、onloadイベントの前に焼成を確保 // のiframeにも多分後半が、安全 document.attachEvent(「onreadystatechangeに」、DOMContentLoaded)。 // 常に動作することを、window.onloadするフォールバック window.attachEvent(「オンロード」、jQuery.ready)。 // IEとしないフレームは、場合 // 継続的に文書の準備ができているかどうかを確認します VaRのトップレベル= 偽; 試す{ トップレベル = window.frameElement == nullを。 } キャッチ(E){} であれば(document.documentElement.doScroll && トップレベル){ doScrollCheck()。 } } } / * 略* / })
次のようにここでは、document.addEventListenerは、このような機能を実行しますDOMContentLoaded後にロードされたDOMツリーとして、文書にDOMContentLoadedイベントをバインド呼び出して、定義されたDOMContentLoaded機能は次のとおりです。
IF(document.addEventListener){ // IE9 +、および他のブラウザの場合 DOMContentLoaded = 関数(){ document.removeEventListener( "DOMContentLoaded"、DOMContentLoaded、偽); // 最初の文書DOMContentLoadedイベント削除 )(jQuery.readyします。 // 呼jQuery.ready()関数のイベントリスナ実行準備 }; } そう IF (document.attachEvent){ DOMContentLoaded = 関数(){ //体が存在することを確認し、少なくとも、場合にはIEは(チケット#5443)少し熱心取得します。 もし(document.readystateで=== "完了" ){ document.detachEvent( "onreadystatechangeに" 、DOMContentLoaded)。 jQuery.ready(); } }。 }
最初のイベントDOMContentLoaded機能で削除され、その後、DOMツリーの後にイベントをトリガーされる()イベント、jQuery.readyを呼び出して(私たちは、関数が増加します()内)jQuery.fn.readyにfnをreadyList.addを(実施し)ターントリガーで、次のように:
jQuery.extend({ isReady:偽、 準備ができて:機能(待機){ // 実際のトリガイベントリスナー準備準備イベントリスナー関数機能一覧readyListとデータキャッシュオブジェクトを実行するための機能。 // AまたはHOLD ANは/ domreadyをリリースイベントとまだREADYロード IF((===待つ真 && - !! jQuery.readyWaitを)||(==待つ真!&& jQuery.isReadyを)){ // 真のウェイトが0 jQuery.readyWaitに等しい場合または待機は真実ではないと偽jQuery.isReady jQuery.isReadyの初期化がfalseに行われる // 確かに体が、少なくとも、リトル熱心(チケット#5443)。ケースにIEを得て、存在することを確認してください IF(!{document.body) リターンsetTimeout(jQuery.readyは,. 1 ); } // DOMザの準備ができていることを覚えておいて jQuery.isReady = trueに ; // 設定jQuery.inReady真、readyイベントがレディであることを示します。 // DOMが準備A通常のイベントは、デクリメントを発射した場合、および待ち時間が必要であれば IF(待機==!trueに && --jQuery.readyWait> 0 ){ リターンは、 } // 関数を実行するために、そこにバインドされている場合を readyList.fireWithを(文書、[jQueryの]); //は、readyイベントリスナー関数readyListを実行し、コンテキストは(すなわち、これをキーワード)文書で、[jQueryの]パラメータreadyイベントリスナー関数です。 // トリガーいかなる束縛準備イベント の場合(jQuery.fn.trigger){ jQueryの(ドキュメント).trigger( "準備完了").off( "準備完了" )。 } } } / * 略* / })
砂漠のQQ:22969969によって作家
最後の関数リストの各機能のバックをオフにトリガするreadyList.fireWith()メソッドを呼び出します。