JavaScriptをページ読み込み後に処理を実行する方法

このページではJavaScriptでページ読み込み後に任意の処理を実行するための方法をコピペできるサンプルソースで紹介します。

jQueryは使わずに実装する(Vanilla JS)のが近年の潮流ですが、jQueryの例も載せておきます。

onload

onloadは画像やCSSなどが全部読み込まれてから

window.onload = function() {
	console.log('ページの全リソースの読み込みが完了');
}

window.addEventListener("load", function() {
	console.log('ページの全リソースの読み込みが完了');
});

onloadよりも早く、HTMLを読み込んだ時点で実行できるのが「DOMContentLoaded」

document.addEventListener('DOMContentLoaded', function() {
　　console.log("HTMLの読み込みが完了")
});

jQueryで全てのリソースを読み込んだ後実行する方法

$(function (){
	console.log('ページの全リソースの読み込みが完了');
});