window.onloadに関する個人的なまとめ

目新しさは全くないですがwindow.onloadに関する個人的なまとめ

1. window.onloadは画像などを含め必要なファイルが全て読み込まれたタイミングで実行。
2. window.onloadが複数ある場合最後のonloadのみ実行される。
   （他のライブラリや人が作成したソースを流用している場合コンフリクトします。）
3. window.onloadは意図した通りの動作になっているように見えて実はキャッシュが残っているだけの場合がよくある。
   おそろしいWebあるあるですね。
   その場合はキャッシュがない最初の1回目の訪問時は意図しない状態になっていますが2回目以降の訪問時は正常に表示されていてるので気のせいに感じてエラー状態になかなか気づきにくい状態に陥ります・・・

window.onloadは複数ある場合最後のonloadが実行されるという性質上、一回しか使用できません。
さらに外部API利用時（googleMapなど）に呼び出しが必要になるケースもあるので個人的に大切に扱うようにしております。

window.onload = function(){
    //処理を記述
}

コンテンツの高さ（height）が欲しい時には画像が全て読み込まれたタイミングで高さを取得しないと正確な数値が取れません。
その際にwindow.onloadの代わりになるのがjQueryのload関数。
詳しい仕様は解析していないので謎ですが・・・

$(window).on('load', function() {
    //処理 記述
});

$(window).on(‘load’)を重宝するのはwindow.onloadと同じように画像などを含め必要なファイルが全て読み込まれたタイミングで実行されるのにwindow.onloadとコンフリクトせず、しかも何回も使えます。

そういえばここ数年は基本window.onloadでは記述せず（必要な時のみ使用）に$(window).on(‘load’)で処理を記述しております。

$(window).on('load', function() {
    kepde.debugExcute("$(window).on('load') 1回目処理"+"  コンテンツ高さ" +$('body').innerHeight());
});

$(window).on('load', function() {
    kepde.debugExcute("$(window).on('load') 2回目処理"+"  コンテンツ高さ" +$('body').innerHeight());
});

$(window).on('load', function() {
    kepde.debugExcute("$(window).on('load') 3回目処理"+"  コンテンツ高さ" +$('body').innerHeight());
});

window.onload = function(){
    kepde.debugExcute('window.onload 1回目処理'+"  コンテンツ高さ" +$('body').innerHeight());
}

window.onload = function(){
    kepde.debugExcute('window.onload 2回目処理'+"  コンテンツ高さ" +$('body').innerHeight());
}

上記がサンプルコード。
window.onloadは最後の処理しか呼び出されず$(window).on(‘load’)は複数回呼び出されているのが確認できます。
画像が読み込み完了後に呼び出されますので正常にコンテンツの高さが取得できているのが確認できます。

1. ※ソースの流用、改変は自由ですが自己責任とさせていただきます。