jquery対応関数のソースコードresearch_jquery

通常の状況では、body タグの onload はウィンドウのロード イベントをリッスンするように設定されますが、ページ上に多数の画像がある場合、ロード イベントはページのすべての要素が読み込まれるまでトリガーされません。実行時に、ユーザーが他の操作を実行した場合、Jquery ライブラリには非常に便利で使いやすい関数 ($(selector).ready()) が用意されています。ページの DOM がロードされた後に、対応する操作を実行します (もちろん、これはユーザーのブラウザーのサポートに依存します)。例:
$(document).ready (function(){alert('ページスクリプトタグで使用') } );
$(document).ready(function(){alert('インポートjsファイルで使用') });
原則:
jquery スクリプトがロードされると、isReady タグが DOMContentLoaded イベントをリッスンするように設定されます (これはすべてのブラウザーで共通ではなく、jquery の動作はブラウザーごとに異なります)。もちろん、ready 関数が呼び出されたとき、isReady が設定されていない場合は、ページがロードされていないことを意味し、ページがロードされると、キャッシュされた関数が配列にキャッシュされます。
Jquery での詳細なコード分析:

コードをコピーします。

ready: function(fn ) {
// バインドリスナー
bindingReady();
// DOM がロードされている場合
if (jQuery .isReady)
// この関数をすぐに実行します
fn. call (document, jquery);
// それ以外の場合
Else
// 関数をキャッシュ配列に追加します
jquery.readylist.push (function () {RETURN FN.Call (this, this, this, this, this, this, this, jQuery); } );
これを返します。 >

コードをコピー


コードは次のとおりです:

var readyBound = false;
function bindingReady(){
if (readyBound ) return;
readBound = true;

// Mozilla、opera、webkitnightlies は DOMContentLoaded をサポートしますEvent
if ( document.addEventListener && !jQuery.browser.opera)
// イベント コールバックを直接使用します
document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); 🎜> // IE でフレームに埋め込まれていない場合
// ドキュメントが読み込まれているかどうかを常に確認する必要があります
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery. error ) {
//// この場所をマークし、後で解析します (2)
setTimeout( argument.callee, 0 );
リターン;
}
// 待機中の関数を実行します
jQuery.ready();
})();

if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i if (document.styleSheets [i].disabled) {
jQuery.ready();

if ( jQuery.browser.safari ) {
🎜> ( function(){
if (jQuery.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) { // Mark(4)
numStyles = == 未定義 )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) { // マーカー (5)
setTimeout ( argument.callee, 0 );
return; 🎜> }

// window.onload へのフォールバック、常に機能します
jQuery.event.add( window, "load", jQuery.ready ); // マーカー (6)
}
}



(1): これは主に IE で DOM の準備ができているかどうかを測定するためのもので、原理は http://javascript.nwbox.com/IEContentLoaded/ にあり、DOM が準備されていない場合に使用できます。解析が完了すると、Document の document.documentElement.doScroll("left") の呼び出しが失敗します。この小さなトリックは、DOM の準備ができているかどうかを知るのに役立ちます。 0 秒間呼び出します。実際にはすぐには呼び出されませんが、現在保留中のイベントに対してイベント ハンドラーを実行し、その前にドキュメントの現在の状態の更新を完了するようにブラウザに指示します。 Arguments.callee は外部の匿名関数であり、パラメータ
の呼び出し元です (3): これについては奇妙に感じるかもしれませんが、なぜ mozilla で処理しないのでしょうか? その理由は、opera の DOMContentLoaded イベントが発生した後です。その CSS スタイルはまだ完全に利用可能ではないため、各 CSS タグが有効かどうかを判断するには特別な処理が必要です。
(4)、(5): Safari の document.readyState のステータスがロードまたは完了すると、CSS がファイルがまだ導入されていないため、CSS ファイルの数を判断する必要があります
(6): 最後に、上記のハックがサポートされていない場合は、最も安全なロード イベントを使用してください。初期化コードが実行できることを確認します。