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

2022.08.02 / 2022.08.02

本記事では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でページ読み込み後に処理を実行する方法は以下の３つあります。

$(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>