JavaScript, jQuery のload イベント

JavaScript, jQuery のload イベント


どうもどうも、バンビワールドです。
今日はJavaScript, jQueryのロードイベントについてのメモ書きです。

通常はjavaScriptのonloadイベントを使用して実行します。

window.onload = function(){
    // ページ読み込み時の処理を書く
}

jQueryの場合は、readyメソッドを使用して実行します。

$(document).ready( function(){
    // ページ読み込み時の処理を書く
});

上記二つは、同じ動きをしてくれますが、
処理をするタイミングが違います。

処理の順番は、

  1. ページの読み込みが始まる
  2. htmlの読み込みが終わる
  3. $(document).readyが実行
  4. 画像など含めすべてのコンテンツの読み込みが終わる
  5. window.onloadが実行

となります。

また、onloadイベントは、複数ある場合、
最後のものだけが実行されます。

window.onload = function(){
    alert('こっち1');
}

window.onload = function(){
    alert('こっち2');
}

上記の場合、[こっち2]のアラートしか表示されません。

なので、トータルで考えると、
$(document).readyを使用したほうが無難かと思います。

※追記
$(document).readyを使用する際、下記の書き方で、

$(function(){
    // ページ読み込み時の処理を書く
});

省略表記出来ます。

システム / プログラムカテゴリの最新記事