09 | 2017/10 |  11

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jQuery()の挙動を解読する(21) $(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)

$(document).ready(fn) - bindReady() - $.ready()

$(document).ready(fn) が bindReady() を、そしてそこから $.ready() が呼び出される三層構造で、これらのメソッドが機能します。

それぞれの役割は、順に以下のようになります。

  1. $(document).ready(fn)……(1/2) DOM読み込み完了通知イベントの登録( bindReady()メソッドの実行 )
  2. $(document).ready(fn)……(2/2) DOM 読み込み完了時の fn の実行と DOM 読み込み完了時に実行させる関数の登録、
  3. bindReady()……(2) DOM 読み込み完了のチェックと完了時の jQuery.ready()呼び出し
  4. jQuery.ready()……(3) DOM 読み込み完了を記録するプロパティの設定、未実行関数の実行、jQuery(document).bind("ready",fn)で登録された関数 fn の実行

以下に順にこれらのメソッドや関数の挙動を解読します。

$(document).ready(fn) メソッド
  1. まず、当該ページが開かれつつある段階で bindReady() 関数を呼び出します。
    この関数がブラウザ毎に異なる方法によって DOM ツリーが読み込まれたかどうかをチェックします。
    このbindReady() 関数の呼び出しが終わった後には、$(document).ready(fn) は 次の処理に進みます。
  2. 第二に、その時点で jQuery.isReady = true となっているならば(つまり jQuery.ready() メソッドが実行済みならば)、直ぐに fn 関数を実行します。
    なお、bindReady()メソッドは当該ページが unload されるまで、二度と機能することはありません。冒頭の変数 readtyBound によって一度切りの実行しか許されないからです。そこから呼び出される jQuery.ready() メソッドも一度きりの実行です。
    これらの2つのメソッドは当該頁のload完了前に一度だけ機能し、その後は unload され reload されるまでは、働くことはありません。
    つまり、当該ページに設置された2つ目以降の jQuery(document).ready(fn) 実行時には、 jQuery(document).ready(fn) が呼び出す bindReady() メソッドは直ぐに returnを返し、既に実行済みの jQuery.ready() クラスメソッドによって、isReady プロパティが true になっているので、瞬時に所定の関数 fn が実行されることになります。
  3. 第三に、その時点で DOM 読み込みが完了していなければ(※)、その return 値を受け取れる形式にして fn 関数を実行待ちリストに登録します。

    ※ この時点で DOM 読み込みが完了していない状態とは、bindReady()メソッドが起動されて DOMContentLoaded イベントの発生(またはそれに準じる状態)を待機する状態になり、その後 jQuery.ready() メソッドも起動し終えたものの、まだ DOM 読み込み完了が終わらない期間に発生します。
    DOM ツリーが巨大なほどこの待機時間は長くなる訳です。

呼び出された bindReady() 関数は以下の処理を行います。
Mozilla 系の場合
jQuery.ready() メソッドをイベントハンドラー関数として、DOMContentLoaded イベント(注1)をバインドします。
後は、DOMContentLoaded イベントが発生した時点で jQuery.ready() メソッドが起動され、リストに登録されている関数が実行されます。
IE の場合
DOMContentLoaded イベントを実装しない IE に対して、ver 1.2.2 では新しい trick が使われました。その方法とは、func function 内に try / catch 文を設け、その try 句内で document.documentElement.doScroll("left") を起動してエラーが発生したら、その catch 句内から関数 func の再帰呼び出しを繰り返します。そして doScroll メソッドがエラーを発生しなくなったら、つまり DOMContentLoaded イベントの発生と同状態になったら、jQuery.ready()を起動します。
Opera の場合
addEventListner() 及び DOMContentLoaded イベントを利用しますが、Mozilla 系と異なるのは DOMContentLoaded イベント発生時に直ぐにjQuery.ready()メソッドを起動しないことです。
当該サイトで使用されているスタイルシートの全てが有効になるまで繰り返しチェックし、全てが有効になった時点で jQuery.ready() メソッドを実行します。
こうした手順を踏むのはおそらく、Operaではスタイルシート読み込み完了前に DOMContentLoaded イベントが発生してしまうためだと、推測されます。
safari の場合
safari も DOMContentLoaded イベントをサポートしていません。そしてsafariの場合には以上の3つのブラウザに較べて最も手間を要してDOMContent の Loaded 状態をチェックしています。
まず、document.redayState プロパティがloaded かつ complete になるまでチェックを繰り返します。
それをクリアしたら次に、header タグ内の style タグとlink タグの合計数をカウントさせ、それがdocument.stylesheets.length と一致するまで、そのチェックを繰り返します。
以上2つのチェックを終えた時点でやっと jQuery.ready() メソッドを呼び出します。
window.loaded メソッドの代替
最後に、window.loaded メソッドの代替手段(a fallback)として、addメソッドを使って window 要素に、jQuery.readyメソッドをイベントハンドラー関数とする load イベントを登録します。これはいわば最後の砦、最後の手段を用意したということでしょう。
何らかの理由によりそれまでのチェックの全てが無効だった場合には、window が loaded になった時点で、bindReady() メソッド が jQuery.ready() メソッドを起動させて所定の関数を起動させることになるのですから。
なお jQuery.ready() メソッドによる所定の関数の二重起動の心配はありません。bindReady()関数の冒頭に設置された変数 readyBound がそれを防止してくれます。このメソッドは一度起動されれば、unloadされるまで再び機能することはありません。
bindReady() 関数から呼び出された jQuery.ready() クラスメソッドは、次の処理を行います。
  • もし jQuery.isReady プロパティが false のままであれば true に変更します。
  • readyList に登録されている関数があれば、これを順次実行します。
  • 実行し終えたら readyList プロパティを nullとし、実行を待つ関数リストを空白とします。
  • 最後に、ver 1.2.2 で追加された $(document).bind("ready",func) が使用されていれば ready イベントを励起させて、func 関数を実行します。

各種メソッドのコード一覧

2237 ready: function(fn) {
2238  // Attach the listeners
2239  bindReady();
2240
2241  // If the DOM is already ready
2242  if ( jQuery.isReady )
2243   // Execute the function immediately
2244   fn.call( document, jQuery );
2245
2246  // Otherwise, remember the function for later
2247  else
2248   // Add the function to the wait list
2249   jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
2250
2251  return this;
2252 }

▲ToTop

2282:var readyBound = false;
2283:
2284:function bindReady(){
2285:  if ( readyBound ) return;
2286:  readyBound = true;
2287:
2288:  // Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
2289:  if ( document.addEventListener && !jQuery.browser.opera)
2290:   // Use the handy event callback
2291:   document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
2292:
2293:  // If IE is used and is not in a frame
2294:  // Continually check to see if the document is ready
2295:  if ( jQuery.browser.msie && window == top ) (function(){
2296:   if (jQuery.isReady) return;
2297:   try {
2298:    // If IE is used, use the trick by Diego Perini
2299:    // http://javascript.nwbox.com/IEContentLoaded/
2300:    document.documentElement.doScroll("left");
2301:   } catch( error ) {
2302:    setTimeout( arguments.callee, 0 );
2303:    return;
2304:  }
2305:  // and execute any waiting functions
2306:  jQuery.ready();
2307: })();
2308:
2309: if ( jQuery.browser.opera )
2310:  document.addEventListener( "DOMContentLoaded", function () {
2311:   if (jQuery.isReady) return;
2312:   for (var i = 0; i < document.styleSheets.length; i++)
2313:    if (document.styleSheets[i].disabled) {
2314:     setTimeout( arguments.callee, 0 );
2315:     return;
2316:    }
2317:   // and execute any waiting functions
2318:   jQuery.ready();
2319:  }, false);
2320:
2321: if ( jQuery.browser.safari ) {
2322:  var numStyles;
2323:  (function(){
2324:   if (jQuery.isReady) return;
2325:   if ( document.readyState != "loaded" && document.readyState != "complete" ) {
2326:    setTimeout( arguments.callee, 0 );
2327:    return;
2328:   }
2329:   if ( numStyles === undefined )
2330:    numStyles = jQuery("style, link[rel=stylesheet]").length;
2331:   if ( document.styleSheets.length != numStyles ) {
2332:    setTimeout( arguments.callee, 0 );
2333:    return;
2334:   }
2335:   // and execute any waiting functions
2336:   jQuery.ready();
2337:  })();
2338: }
2339:
2340: // A fallback to window.onload, that will always work
2341: jQuery.event.add( window, "load", jQuery.ready );
2342:}
2343:

▲ToTop

2256: isReady: false,
2257: readyList: [],
2258: // Handle when the DOM is ready
2259: ready: function() {
2260:  // Make sure that the DOM is not already loaded
2261:  if ( !jQuery.isReady ) {
2262:   // Remember that the DOM is ready
2263:   jQuery.isReady = true;
2264:
2265:   // If there are functions bound, to execute
2266:   if ( jQuery.readyList ) {
2267:    // Execute all of them
2268:    jQuery.each( jQuery.readyList, function(){
2269:     this.apply( document );
2270:    });
2271:
2272:    // Reset the list of functions
2273:    jQuery.readyList = null;
2274:   }
2275:
2276:   // Trigger any bound ready events
2277:   jQuery(document).triggerHandler("ready");
2278:  }
2279: }
注1 DOMContentLoaded について

このイベントは Mozilla 系と Opera には実装され、IE とsafari は未実装です。

こちら 第30回 JavaScriptの動作を軽くするための工夫:ITpro が大変参考になります。

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/614-67328aa6

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200801172328
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。