フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【jQuery】ロードよりも遅いタイミング指定も!ページ読み込み後に処理を実行する方法とタイミングの違い

jQuery
load
setTimeout()
実行タイミング

jQueryでページを読み込んだら処理を実行するタイミングの記述方法はいろいろあります。
この記事ではそれぞれの記述方法と実行タイミングの違いについてご紹介したいと思います。

ページ読み込み後の記述方法の種類

jQueryでページを読み込み後に処理を実行する記述は大きく分けてreadyloadがあります。
そして、この2つの実行タイミングには若干の違いがあり、readyの方が早くloadの方が遅くなっています。

それではそれぞれの記述方法と詳しい実行タイミングについて見ていきましょう。

ready

readyの実行タイミングはDOMが完全に読み込まれたタイミングで実行されます。
画像やスタイルシートなどの読み込みが完了していなくてもDOMさえ読み込みが完了したら実行されます。

そのため、HTMLだけを操作する場合はこのタイミングで問題ありません。
しかし、画像やスタイルシートなどの読み込みが完了している保証はないため、それらを操作したい場合はこのタイミングでは早すぎます。

readyの記述方法はこちら。

$(function(){
    // 実行したい処理を記述

});

もしくは

$(document).ready(function(){
    // 実行したい処理を記述

});

これらは記述方法の違いだけで実行タイミングは全く同じです。

load

readyの実行タイミングはWebページの読み込みが完全に完了したタイミングで実行されます。
つまり、readyのタイミングでは不完全だった画像やスタイルシートなどの読み込みも完了しています。

画像を変更したり、CSSを操作したりする場合は、readyのタイミングでは早すぎるため、loadのタイミングまで処理を待つ必要があります。

loadの記述方法はこちら。

jQuery2系の場合。

$(window).on('load',function(){
    // 実行したい処理を記述

});

jQuery2系の場合。

$(window).load(function(){
    // 実行したい処理を記述

});

loadの記述方法はjQueryのバージョンによって異なります。

loadより遅いタイミングにしたい場合は

大抵のことはloadのタイミングで実行すれば正しく動作してくれます。
しかし、稀にloadのタイミングでも早い場合があります。

jQueryにはloadより遅いタイミングで自動実行する処理は無いため、setTimeout()関数を組み合わせます。
これにより処理タイミングを画面の読み込みが完全に完了してからさらに遅延させることが出来ます。

setTimeout()関数を組み合わせた記述方法はこちら。

$(window).on('load',function(){
    setTimeout(function(){
        // 実行したい処理を記述

    },100);
});

上のサンプルコードでは、画面の読み込みが完全に完了してからさらに0.1秒後が実行タイミングとなります。

恐らくこのタイミングまで実行タイミングを遅らせることでどんな値での取得出来るはずです。それでも取得出来ない場合は、実行タイミングではなく、プログラム自体に問題がある可能性が高いです。

まとめ

いかがでしたか?
jQueryの実行タイミングは記述方法によって若干の違いがあることが分かりました。
実行したい内容に合わせて適切なタイミングで処理を実行していきましょう。