9月 262012
 
このエントリーをはてなブックマークに追加
はてなブックマーク - window.onload とjQury(document).ready の違い
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

 

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

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

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

 

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

 

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

 

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

 

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

 

<script>
  jQuery(document).ready(

    function() {

      // 処理
      alert("mogo");

    }
  );
</script>

 

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

 

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

 

<script>
  jQuery(function() {

      // 処理
      alert("mogo");

  });

</script>

 

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

 

 


  One Response to “window.onload とjQury(document).ready の違い”

  1. I read a lot of interesting posts here.
    Probably you spend a lot of time writing, i know how to save you a lot of work, there
    is an online tool that creates unique, SEO friendly posts
    in seconds, just search in google – masagaltas free content

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player