ページ読み込み後に実行する関数の違い一覧(JavaScriptとjQuery)

ページを読み込んだら、すぐに実行する関数、それぞれ実行するタイミングや動作が違う。
短縮形なども含めると結構たくさんあるので、まとめてみました。

JavaScript

window.onload = …

HTMLや画像など他の全てのデータの読み込みが完了した時に実行される。
複数ある場合は、最後の処理が実行される。

document.body.onload = …

window.onloadと同じ。(ブラウザによって挙動が違う場合あり)

document.addEventListener();

HTMLが読み込まれた時点で実行される。(画像などは待たない)
複数ある場合はすべて実行される。
$(document).ready()とほぼ同じ動作。

HTMLや画像など他の全てのデータの読み込みが完了した時に実行される。
複数ある場合はすべて実行される。
$(window).on('load',とほぼ同じ動作。

(function()…

即時関数
HTMLの準備を待たずに実行する。

jQuery

$(document).ready();

HTMLが読み込まれた時点で実行される。(画像などは待たない)
複数ある場合はすべて実行される。

jQuery(document).ready();

$(document).ready()の別の書き方($()が他とかぶる場合など)

$(function()…

$(document).ready()の短縮形

$().ready(function()…

$(document).ready()の短縮形

$(document).on(‘ready’,…

これも動作は同じ。

$(window).on(‘load’,…

jQuery3.0以降では、$(window).load()の代わりにこちらを使う。
HTMLや画像など他の全てのデータの読み込みが完了した時に実行される。
複数ある場合はすべて実行される。

$(window).load();

$(window).load()は、jQuery1.8で非推奨、3.0で削除された。

$.event.add(window,’load’,…

まとめ

まとめてみた結果、

JavaScriptなら、
document.addEventListener();

jQueryなら、
$(document).ready();$(window).on('load',…

を覚えておけば良さそう。

ready系:HTMLを読み込み終わったら実行。
load系:画像などすべて読み込んでから実行。