window.onload とjQury(document).ready の違い

 

windows.onload　と　jQuery(document).ready　の違い？

同様な処理に見えますが、内部的には違う動きをしていまます。

昔から愛用されてきた、windowsインスタンスのonloadハンドラ。基本的な書き方は以下の通りです。

 

<script>
  window.onload = function() {
    // 処理
    alert("hoge");        
  }			
</script>

 

処理部のコードは、HTML文書が完全にロードされたあとで実行されます。
つまり、onloadを用いると画像、動画、Flash等の全ての外部リースが完全にロードされ、ページがブラウザ画面に表示されるまで処理を待つという事ですね。

 

これって、ユーザエクスペリエンス上好ましくないです。

 

もう１つの記述方法、jQUeryを使用する場合。　基本的な書き方(正式な構文)は以下の通りです。

 

<script>
  jQuery(document).ready(

    function() {

      // 処理
      alert("mogo");

    }
  );
</script>

 

ブラウザがHTMLをDOMツリーに変換し終わった時点で処理が実行されます。　解かりやすくいうと、先に上げた画像のような全ての外部ソースのロードを待たなくても、処理が実行されるのです。

 

ちなみに正式な構文を、略して書くことが出来ます。こっちの方が見慣れている読者も多いと思います。

 

<script>
  jQuery(function() {

      // 処理
      alert("mogo");

  });

</script>

 

ちょっとした気遣いでユーザエクスペリエンスをアップさせる事が出来る。
開発者はユーザ目線でコードを書かないとですね。