【JavaScript / jQuery】ページ読み込み後に実行する関数の違い

JavaScript

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

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

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

window.onload = function()とほぼ同じ。

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

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

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

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

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

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

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

HTMLが読み込まれた時点で実行される。
複数ある場合はすべて実行される。

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

$(document).ready(function()の別の書き方。

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

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

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

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

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

これも動作は同じ。

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

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

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

jQuery1.8で非推奨、3.0で削除された。

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

JavaScriptは
document.addEventListener('DOMContentLoaded', function()
window.addEventListener('load', function()

jQueryは
$(document).ready(function()
$(window).on('load', function()

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