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

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

記事をシェアする:
タグ:

コメントを残す

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