読み込み完了時に処理をする方法 (ready / load) [jQuery]

初期化時に処理を実行する

jQuery メソッドあるいはそのショートハンドの $ に無名関数を渡して処理を実行する。jQuery 3.0 以降ではこの書き方が推奨される。

$(function () {
  // 処理を実行する
})

jQuery 3.0 以降では ready は非推奨となっている。

$(document).ready(function () {
  // 処理を実行する
})

参考：

jQuery の $(document).ready(function (){}); について | サポンテ 勉強ノート

$(document).ready – Qiita

ページ初期表示時に処理を実行 | Water Margin

jQuery の $() は何をしているのか、DOMContentLoaded と load の違い – GitHub Gist

jQuery() | jQuery API Documentation

.ready() | jQuery API Documentation

DOMContentLoaded との違い

参考：

window.onload と jQuery の $(document).ready 等の比較 | rcmdnk’s blog

DOMContentLoaded | MDN

Native Javascript Replacements for jQuery $(document).ready() and $(window).load() | Philip Newcomer

Pure JavaScript equivalent or alternative to jquery.ready() | Techiediaries

Replace jQuery’s Ready() with Plain JavaScript | SitePoint

How to wait for the DOM ready event in plain JavaScript | DreamHost

Pure JavaScript equivalent of jQuery’s $.ready() – how to call a function when the page/DOM is ready for it – Stack Overflow

特定の要素の読み込み後に処理を実行する (load)

.load() は jQuery 3.0 で廃止された。代わりに .on('load', handler) を使う。

$(window).on('load', function () {
  // 処理を実行する
})

参考：

jQuery の ready() や load() のタイミングの違い | flatFlag

.on() | jQuery 日本語リファレンス (js STUDIO)

.on() | jQuery API Documentation

.load() | jQuery API Documentation

ready と load の違い／順序

参考：

jQuery の読込み ready と load と function の順番について | web-wizardry

ネイティブでハンドラを処理する

参考：

$(document).ready equivalent without jQuery – Stack Overflow

DOM の描画完了を知る方法

参考：

jQuery で特定の DOM の表示が完了したタイミングを取る | y.okano blog

DIV 要素に onload の代用になるものはありますか？ – スタック・オーバーフロー

要素の追加を検出する方法

参考：

動的に読み込んだ DOM 要素の表示完了時に jQuery プラグインを適用したい – スタック・オーバーフロー

on append() do something – Stack Overflow

MutationObserver | MDN

画像を含んだ要素の幅や高さを取得する

on('load', ...) を使う。

$(window).on('load', function () {
  // 処理を実行する
});

参考：

jQuery で画像の幅や高さの取得が不安定な場合は、ページ読み込み実行処理の書き方に注意！ | KuroBox

.on() | jQuery 日本語リファレンス (js STUDIO)

.load() | jQuery 日本語リファレンス (js STUDIO)

.on() | jQuery API Documentation

.load() | jQuery API Documentation

まとめ

参考：

jQuery の基本 – $(document).ready – Qiita