javascript・jQueryでの実行タイミング

javascript・jQueryでの実行タイミング。
既存javascriptをコピーして使い回すと、引っかかりがち。
不具合があるとついつい、内側の処理を疑ってしまって、
ここに気付くのが最後になったりして崩れ落ちるやつです。

JavaScript
//------------ DOMツリー読み込み後の処理 ----------
// 画像読み込み前なので画像の大きさを取得不能
// -- 1 --
$(document).ready(function(){
    // 処理
});
// -- 2 --
$().ready(function(){
    // 処理
});
// -- 3 --
$(function(){
    // 処理
});
// -- 4 --
window.addEventListener('DOMContentLoaded', function(){
    // 処理
    // ※動作的には $(function(){}); と全く同じだが、jqueryのライブラリ読み込み前でもOK
});


//------------ 全データ(画像やCSSなど全て)読み込み後の処理 ----------
//画像読み込み後なので画像の大きさを取得可能
// -- 5 --
$(window).load(function(){
    // 処理
});
// -- 6 --
window.onload = function(){
    // 処理
};

DOMツリー読み込み後の処理

3は1・2の省略形です。

画像/リソース: ページ内の画像や外部ファイル（CSSなど）の読み込み完了を待たずに実行が開始されます。そのため、Webページがユーザーに表示され始めて比較的早い段階で処理を動かせます。

用途: 要素のクリックイベントの設定、フォームのバリデーション、要素の追加・削除など、DOM操作を伴うほとんどのJavaScript処理に使用されます。

一般的に使用されるのは以下の3か4です。

JavaScript
// -- 3 --
$(function(){
    // 処理
});
// -- 4 --
window.addEventListener('DOMContentLoaded', function(){
    // 処理
    // ※動作的には $(function(){}); と全く同じだが、jqueryのライブラリ読み込み前でもOK
});

全データ(画像やCSSなど全て)読み込み後の処理

実行タイミング: Webページの全てのリソースの読み込みが完了した後に実行されます。

特徴: HTMLのDOM構造だけでなく、ページ内の全ての画像、CSSファイル、外部スクリプトといったリソースのダウンロードとレンダリングが完了するまで処理の実行を待機します。

用途: 画像のサイズを取得する処理、ページの完全に描画された状態を前提とする複雑なレイアウト調整など、全てのリソースの読み込みが必須となる処理に使用されます。

よく見かけたりするものの、5は現在非推奨となっています。

JavaScript
// -- 6 --
window.onload = function(){
    // 処理
};

　　

まとめ

基本的には以下を使うものの、

JavaScript
// -- 3 --
$(function(){
    // 処理
});

jQueryを使わない場合は、ネイティブ JavaScript の以下の記述。

JavaScript
// -- 4 --
window.addEventListener('DOMContentLoaded', function(){
    // 処理
    // ※動作的には $(function(){}); と全く同じだが、jqueryのライブラリ読み込み前でもOK
});

画像サイズの取得、完全に描画後のレイアウト調整が必要な場合に以下を使用。

JavaScript
// -- 6 --
window.onload = function(){
    // 処理
};
タイトルとURLをコピーしました