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