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

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

JavaScript

window.onload = …

window.onload = function() {
    実行させたい処理;
}

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

document.body.onload = …

document.body.onload = function() {
    実行させたい処理;
}

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

document.addEventListener(‘DOMContentLoaded’,…

document.addEventListener('DOMContentLoaded', function() {
    実行させたい処理;
});

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

window.addEventListener(‘load’,…

window.addEventListener('load', function() {
    実行させたい処理;
});

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

(function()…

(function () {
    実行させたい処理;
}());

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

jQuery

$(document).ready();

$(document).ready(function() {
    実行させたい処理;
});

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

jQuery(document).ready();

jQuery(document).ready(function($) {
    実行させたい処理;
});

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

$(function()…

$(function() {
    実行させたい処理;
});

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

$().ready(function()…

$().ready(function(){
    実行させたい処理;
});

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

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

$(document).on('ready', function(){
    実行させたい処理;
});

これも動作は同じ。

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

$(window).on('load', function() {
    実行させたい処理;
});

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

$(window).load();

$(window).load(function() {
    実行させたい処理;
});

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

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

$.event.add(window,'load',function() {
    実行させたい処理;
});

まとめ

まとめてみた結果、

JavaScriptなら、
document.addEventListener('DOMContentLoaded',…とwindow.addEventListener('load',…

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

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