jQuery.ready()とloadイベント

以前、jQuery.ready()とloadイベントって具体的にはタイミングがどう変わるんだろね?という話になってちょっと調べ……たのも以前の話、なのですが……。

ぐぐってみるとページ読み込み時に実行するjavascriptについてのTips | Tips Note というページが見つかって、そのページでは

■処理を実行するタイミングの違い
onloadイベントとjQueryのreadyメソッドは
処理を実行するタイミングが異なります。

jQueryのready()メソッド
DOMツリーの構築が完了した時点で処理を実行する。
onloadイベント
DOMツリーの構築だけでなく、画像などの関連データの読み込みが完了しないと処理を実行しない。

と書かれています。

では、実際に試してみましょう。まずベースとなるHTML+JavaScriptを以下のように準備します。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery.ready()とloadイベント&#064;UCWD-Studio.</title>
<script src="https://ucwd.jp/wp-includes/js/jquery/jquery.js"></script>
<script>
jQuery( function () {
    jQuery(window).load( function () {
        jQuery("#report").append('<p>load: ' + now() +'</p>');
    });

    jQuery("#report").append('<p>ready: ' + now() + '</p>');
});

function now () {
    var dt = new Date();
    return dt.toLocaleString();
}
</script>
</head>
<body>
<h1>Event Test</h1>
<div id="just_a_minute"><iframe src="./just_a_minute.php"></iframe></div>
<div id="report"></div>
</body>
</html>

で、iframe内に表示するファイルをPHPで以下のように準備します。

<?php
sleep(10);
header('Content-type: text/plain; charset=utf-8');
echo 'iframe loaded.';
?>

ポイントは sleep() を使ってわざとレスポンスを遅らせてる点です。すると、$.ready() の方はさっと表示されるのに対し、loadイベントの方は iframe 内が読み込まれるまで表示されないのが実際に確認できます。

サンプルを用意してるので実際に確認してみてください。