ページ初期化：オンロードが必要ですか？

Question

これは、SOの記事とこのSOの記事です。私は私のWebアプリケーションがIE8で起動しないことに気づいた後、これらを見ました...私は現時点で下位互換性は気にしませんが、それはなぜコードの1行ではないのですか？とにかく私が持っていたもう一つの問題は、すべてのコンテンツがロードされるのを待っているonloadイベントです。ユーザーが画像をダウンロードするのを待っている場合、コントロールはありません。これは、私はちょうど私がページを初期化したいhtmlの中に置かれ

<script type='text/javascript'>my_initialize_function()</script> 

を使用する必要があることを信じるように私を導きました。

と

window.onload = initializePage; 

または

window.addEventListener('load',initialize_page); 

または任意の類似したにさよならを言います。

私の質問です：これは、ページを初期化するための有効なアプローチですか？

PS：私はJQueryを含むライブラリを使用していません...そして、明らかにまだ読み込まれていない要素を初期化しようとはしません。

Answer 1

号

jQueryと同様のライブラリーは、興味深いアプローチを有します。彼らは、クロスブラウザー方式で異なるイベントをキャプチャするだけでなく、開発者が使いやすいようにします。

のは、次のコードを考えてみましょう：それは

<script> document.getElementById('a').innerHTML='b'; </script> 
<div id="a"></div> 

をかはそれを発見したり、文書全体が構築された後にのみとき、ブラウザのJavaScriptを実行しているかどうかに応じてをすることができないことがあります。

一方、適切なイベントメカニズムを使用していても、文書にが既に組み込まれている場合は、コードは呼び出されません（）。

jQuery unitesシームレスで優れたシステムを得るための両方のパラダイム。何かのように：

var foo = { 

    // holds list of callbacks to call when document starts 
    stack: [], 

    // document not ready yet 
    ready: false, 

    // add callback to be called when document is ready 
    add: function(callback){ 
     foo.stack.push(callback); 
     if(foo.ready)foo.fire(); // document is ready, call fire 
    }, 

    // fire callbacks (document IS ready) 
    fire: function(){ 
     for(var i=0; i<foo.stack.length; i++) 
      foo.stack[i](); 
     foo.stack = []; 

     foo.ready = true; // document IS ready 
    } 

}; 

// bind to browser events 
window.onload = foo.fire; // TODO: you should use actual events 

// example of use 
foo.add(function(){ 
    alert('Document is ready!'); 
}); 

Answer 2

jQueryの$(document).ready()イベントを使用できます。 DOMが完了した後、すべての画像がロードされる前に起動します。