JavaScriptやjQueryでページ読み込み後に処理を実行する際の記述方法まとめ

JavaScriptで、よくページ読み込み後に何かを実行したい場合は頻繁にあると思いますが記述方法が色々とあり、混乱してきたのでまとめてみました。以降は全て同じ意味です。

jQueryでのready記述方法

$(function() {
  // Any Code...
});
jQuery(function() {
  // Any Code...
});
$(document).ready(function() {
  // Any Code...
});
jQuery(document).ready(function() {
  // Any Code...
});

jQueryを使わないピュアなJavaScriptでの記述はこちら。JavaScriptだと少しコード量が増えてしまいますし、IE9以上でないと使用できないようですが最近では脱jQueryの動きもあるので私はこのぐらいのコード量の差であればJavaScriptの記述方法で書くようになりました。

JavaScriptでのready記述方法

document.addEventListener('DOMContentLoaded', function() {
  // Any Code...
}, false);

一方、上記に比べるとあまり使う機会はないかもしれませんが、readyとは違い画像やiframeなども全てロードされた時点で処理を実行するloadの記述方法は以下です。

jQueryでのload記述方法

$(window).on('load',function() {
  // Any Code...
});
jQuery(window).on('load',function() {
  // Any Code...
});
$(window).load(function() {
  // Any Code...
});
jQuery(window).load(function() {
  // Any Code...
});

JavaScriptでのload記述方法

window.onload = function() {
  // Any Code...
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です