【jQuery】ページを読み込んだあとに処理を実行:readyとloadの違いについて

時計 2022.08.02 / 時計

【jQuery】ページを読み込んだあとに処理を実行:readyとloadの違いについて

記事ではjQueryでの、ページを読み込んだ後処理を実行する方法について解説していきます。

jQueryでページ読み込み後に処理を実行する方法として、ready()メソッドを利用した方法やloadイベントを利用した方法があります。

それぞれで処理を実行するタイミングが異なっているため、違いを理解して使い分けることが重要になります。本記事を通してそれぞれの方法の理解を深めてください。

ページ読み込み後に処理を実行するとは?

ブラウザが特定のサイトにアクセスしてページを表示する際、HTML(DOM)を上から順番に読み込んでいきます。

そのため次のようにDOM構築前にjQueryが実行されてしまうとエラーが発生します。

<head>
    <script>
        $('h1').text('Office54');
    </script>
</head>

<body>
    <h1></h1>
</body>

このようにjQueryやJavaScriptではHTMLコンテンツをすべて読み込んだ後(DOM構築後)のタイミングで処理を実行したい場面が多々あります。

jQuery:ページ読み込み後に処理を実行する方法

jQueryでページ読み込み後に処理を実行する方法は以下の3つあります。

  • $(function(){});
  • $(document).ready(function(){});
  • $(window).on('load', function() {});

それぞれの方法について次項より詳しく解説していきます。

$(document).ready(function(){});

ready()メソッドとは

ready()メソッドはHTML(DOM)をすべて読み込んだ後(HTML構造が組み立てられた後)に処理を実行するメソッドです。

HTMLは上から下に読み込まれ、すべて読み込んだところ(画像を読み込む前)で処理を実行できるということです。

構文

ready()メソッドを使った、ページ読み込み後に処理を実行する方法は以下構文に沿って記述します。

構文

$(document).ready(function(){処理});

$(document)はページのHTML全体の内容を指しています。

$(function(){});は$(document).ready(function(){});の省略形です。
どちらを使っても結果は同じなので好きな方を使ってください。

私の場合

$(function(){});を基本的には使っています。記述する量が少ないので、コードがすっきりするためお勧めです

サンプルコード

以下にready()メソッドを使ったサンプルコードを記します。

<head>
    <script>
        $(document).ready(function() {
            $('h1').text('Office54');
        });
    </script>
</head>
<body>
    <h1></h1>
</body>

上記コードではHTML構造が組み立てられてからjQueryが実行されます。

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

on()メソッドとは

on()メソッドは対象要素に指定したイベントが発生したときに処理を実行するメソッドです。

jQueryのバージョン1.7からon()メソッドは追加されました。on()メソッドはjQueryに以前から存在したbind()やlive()、delegateを統合したものと言われます。

イベント発生時の実行処理はイベントハンドラfunction(){~}内に記述します。

詳しいon()メソッドの使い方については以下記事をご参照ください。

構文

on()メソッドを使った、ページ読み込み後に処理を実行する方法は以下構文に沿って記述します。

構文

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

on()メソッドのイベントにはloadを指定します。イベントloadはリソースの読み込みが終わった後に処理を実行するイベントです。

loadイベントでは画像等を含めて完全に読み込みが終わってから処理が実行されます。

注意

jQuery2.xまではload()メソッドを利用していましたが、jQuery3.xからはload()メソッドが廃止され、on()メソッドのloadイベントで記述するようにしてください

サンプルコード

以下にon ()メソッドを使ったサンプルコードを記します。

<head>
    <script>
        $(window).on('load', function() {
            $('h1').text('Office54');
        });
    </script>
</head>
<body>
    <h1></h1>
</body>

ready()とon('load')の違い

ready()とon('load')の違いは処理を実行するタイミングです。

ready()はHTML(DOM)が読み込まれた後、on('load')は画像を含めたすべての読み込みが終わってから処理を実行します。

そのためon('load')の方が処理を実行するタイミングは遅いです。

実行するタイミングとしては次のようになります。

  1. HTML(DOM)の読み込み
  2. ready()の処理を実行
  3. 画像などの読み込み
  4. on('load')の処理を実行

画像なども読み込んでから処理を実行したいといった特別な理由がない限り、$(function(){});または$(document).ready(function(){});を利用する方がいいです。