jQueryのreadyとloadの違いは？

jQueryのreadyとloadの違いとは？

jQueryのreadyとloadの違いとは？

Webページの構築において、JavaScriptを用いてDOM操作を行うことは非常に一般的です。 特にjQueryは、その簡潔な構文と豊富な機能により、多くの開発者に愛用されています。 しかし、JavaScriptの実行タイミングとDOMの読み込み状況によっては、意 unintended な動作を引き起こす可能性があります。 そこで重要となるのが、jQueryのreadyイベントとloadイベントの違いを正しく理解することです。

readyイベントとloadイベントの違い

readyイベントとloadイベントの最も大きな違いは、実行されるタイミングにあります。 簡単に言うと、

  • readyイベントは、HTMLの解析が完了し、DOMツリーが構築された段階で実行されます。画像などの外部リソースの読み込みが完了しているとは限りません。
  • loadイベントは、HTML、画像、CSS、JavaScriptファイルなど、ページ上のすべてのリソースが完全に読み込まれた段階で実行されます。

この違いを表にまとめると以下のようになります。

イベント 実行タイミング 特徴
ready DOMツリー構築後、外部リソースの読み込み完了前 HTML要素への操作が可能
load ページ上のすべてのリソース読み込み完了後 画像のサイズ取得など、リソースの読み込みが完了している必要がある処理が可能

具体的なコード例

以下に、readyイベントとloadイベントを使用した具体的なコード例を示します。

readyイベント


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>readyイベントの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // この部分は、DOMツリーが構築された段階で実行されます。
            console.log("DOMの準備ができました！");
            // DOM操作
            $("#myElement").text("readyイベントでテキストを変更しました");
        });
    </script>
</head>
<body>
    <div id="myElement">初期テキスト</div>
</body>
</html>

loadイベント


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>loadイベントの例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(window).on('load', function() {
            // この部分は、ページ上のすべてのリソースが読み込まれた段階で実行されます。
            console.log("すべてのロードが完了しました！");
            // 画像のサイズを取得する
            var imgWidth = $("#myImage").width();
            console.log("画像の幅: " + imgWidth + "px");
        });
    </script>
</head>
<body>
    <img src="https://www.example.com/sample.jpg" id="myImage" alt="サンプル画像">
</body>
</html>

jQuery 3.0 以降の変更点

jQuery 3.0 より前のバージョンでは、`$(window).on('load', function(){})` のような記述方法でも動作していました。しかし、jQuery 3.0 以降では、 `$(window).on()` の処理は `$(function(){})` の外に記述する必要があります。


// jQuery 3.0 以降
<script>
$(function() {
    // readyイベントの処理
});

$(window).on('load', function() {
    // loadイベントの処理
});
</script>

まとめ

jQueryのreadyイベントとloadイベントは、実行されるタイミングが大きく異なります。 HTML要素を操作するだけであればreadyイベントで十分ですが、画像のサイズを取得するなど、すべてのリソースの読み込みが完了している必要がある処理はloadイベントを使用する必要があります。 jQueryのバージョンによる変更点にも注意し、適切なイベントを使用することで、意図したとおりにJavaScriptを実行することができます。

関連QA

Q1: readyイベント内で画像のサイズを取得しようとしたら、正しい値が取得できませんでした。

A1: readyイベントは、画像などの外部リソースの読み込みが完了する前に実行されるため、正しいサイズを取得できません。 画像のサイズを取得するには、loadイベントを使用する必要があります。

Q2: loadイベントを使用しても、一部のJavaScriptファイルが読み込まれていません。

A2: loadイベントは、HTML、CSS、JavaScriptファイルなど、ページ上のすべてのリソースが読み込まれた段階で実行されます。 もし、loadイベントでJavaScriptファイルが読み込まれていない場合は、ファイルのパスが間違っているか、読み込み順序に問題がある可能性があります。 JavaScriptファイルの読み込み順序を制御するには、HTMLの<script>タグのdefer属性やasync属性を使用します。

Q3: jQueryのバージョンを3.0以降にアップグレードしたら、loadイベントが動作しなくなりました。

A3: jQuery 3.0 以降では、`$(window).on('load', function(){})` のような記述方法では動作しなくなりました。 `$(window).on()` の処理は `$(function(){})` の外に記述する必要があります。

その他の参考記事:jquery load イベント