ready

// 推奨される書き方
$(function() {
  // ハンドラのコード
});
// jQuery 3.0 以降では非推奨
$(document).ready(function() {
  // ハンドラのコード
});

参考:

.ready() | jQuery API Documentation

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

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

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

DOMContentLoaded との違い

参考:

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

DOMContentLoaded – Web 技術のリファレンス | MDN

on(‘load’, handler)

.load() は jQuery 3.0 で廃止されました。代わりに .on(‘load’, handler) を使用します。

$(window).on('load', function() {
  // ハンドラのコード
});

参考:

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

.load() | jQuery API Documentation

ready と load の違い/順序

参考:

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

DOM の描画完了を知る方法

参考:

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

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

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

参考:

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

on append() do something – Stack Overflow

MutationObserver – Web API インターフェイス | MDN

画像を含んだ要素の幅や高さ

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

$(window).on('load',function(){
  //処理
});

参考:

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

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

コメントを残す

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