jQueryで読み込んでから処理を開始 #JavaScript

何で読み込み完了後に処理を行うのか。

ブラウザは、HTMLを読みながら基本的に上から順に処理していく。
なので、scriptが先に書かれていて、HTMLのパーツ(DOM要素という。<input type="text">とか)の読み込みが終わっていないと、エラーを出してしまう。

こんな感じ。

<html>
<head>
<script>
    document.testform.textbox.value="hoge";
</script>
</head>
<body>
    <form name="testform">
        <input type="text" name="textbox" value="" />
    </form>
</body>
</html>

読み込み完了後に処理したい場合の書き方

<html>
<head>
<script>
    window.onload = function () {
        document.testform.textbox.value="hoge";
    };
</script>
</head>
<body>
    <form name="testform">
        <input type="text" name="textbox" value="" />
    </form>
</body>
</html>

こうすることで、onload(読み込み完了)後に実行される

jQueryでもうちょっと細かく制御

jQueryで読み込み完了後に実行するように書こうとすると、以下の3パターンがある。

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

ちなみに、少し古い記事だと$(window).load(function () {});が紹介されていたりもするが、こちらは非推奨とされている。バージョン3.0以降だと存在すらしないので注意。

このうち、$(function() {});は$(document).ready(function(){});の省略形なので実質は同じ。
では、$(document).ready(function(){});と$(window).on('load', function() {});で何が違うのか。

readyは、DOMが読み込まれた直後
loadは、ブラウザに表示された直後

となる。その違いを確認するには以下。

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(window).on('load', function() {
    console.log("load");
});
$(document).ready(function(){
    console.log("ready");
});
</script>
</head>
<body>
    <img src="https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</body>
</html>

Googleのロゴ画像を表示させるだけのHTMLで、それぞれの実行結果としてコンソールに文字列を表示している。
実行してみると、ready -> load の順で表示されるはずだ。

DOMの読み込み
ready実行
画像読み込み
load実行

使い分け

では、jQueryの2種類はどう使い分けるのか。
自分は、 明確な目的がある場合はload とし、 基本はready という捉え方をしている。
実行順序の早さから、readyであれば重たい画像を読み込む場合でも影響を受けない。

しかし、画像を読み込んでからでないと困る というケースもある。
例えば、画像の大きさに合わせてdivの高さを変更したい、といった場合。
readyで書いてしまうと、プログラムが実行されるタイミングでは画像はまだ読み込めていないので、画像サイズの取得ができない。
こういった 読み込んだ後のものを使う 場合はloadで、という感じだ。

サンプル

いらないと思うけれど、Qiitaへの投稿と共にGitHubも使ってみることにしたので、サンプルソースを置いてみた。
GitHub→