HTML読み込み時や読み込み完了時にスクリプトを実行する場合、scriptタグに直接スクリプトを記述したり、jQueryの$(function())やJavascriptのonloadを使う。 1つのHTML内にそれらの記述を混在させたとき、実行順はどのようになるのか？
下記のプログラムを作成し、alertを表示して実行順を確認してみる。なおブラウザによって実行順が変わるかまでは検証していない。本プログラムはFireFoxで試したものである。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.min.js"></script>
<script>
// ①番目
alert("body開始前にJavascript [" + $("#txt1").val() + "]");
// ③番目
//window.onload = function(){alert("body開始前にJavascriptでwindow.onload [" + $("#txt1").val() + "]")};
// ④番目
$(function(){
alert("body開始前にjQueryの$(function()) [" + $("#txt1").val() + "]");
});
// ?番目（③番目～⑤番目の前後）
$(window).on('load', function() {
alert("body開始前にjQueryのloadイベント [" + $("#txt1").val() + "]");
});
</script>
</head>
<!-- ③番目 -->
<body onload='alert("bodyタグにonload [" + $("#txt1").val() + "]")'>
<input type="text" id="txt1" value="テスト">
<img src="http://teqspaces.com/common/image/eclipse_spaceremoveoff_1.jpg">
<script>
// ②番目
alert("body終了直前でJavascript [" + $("#txt1").val() + "]");
// ⑤番目
$(function(){
alert("body終了直前でjQueryの$(function()) [" + $("#txt1").val() + "]");
});
</script>
</body>
</html>
このHTMLを表示すると、下記の順にalertが表示される。
まず最優先に実行されるのは<script>タグに直接記述したスクリプトである。これはHTMLの読み込みが完了する前に実行される。 正確に言うとHTML読み込み中に記述があった順に実行される。 よって、body開始前のエレメントが読み込まれていない時点では、エレメントの値は取得できず（undefined状態となる。）、body終了直前では取得ができる。 もしscriptタグのスクリプトでエレメントを操作したい場合は、body終了直前に記述するとよい。
次に実行されるのがJavascriptのonloadである。bodyタグに記述しているonloadスクリプトのこと。 onloadはHTMLの読み込みが完了した時点で呼ばれる。但し、画像ファイルなど外部ファイルの読み込みまでは待ってくれない。 上記プログラムではコメントアウト（bodyのonloadとwindow.onloadは共存できないため）しているが「window.onload=・・・」も同じタイミングとなる。
次に実行されるのがjQueryの$(function())である。これもHTMLの読み込みが完了した時点で呼ばれるが、onloadよりは後に呼ばれる。 この記述が複数あった場合は出現順（記述順）に実行される。jQuery(function())や$(window)のreadyイベントも同様。
基本的に上記３つの優先順位に従って実行されるが、jQueryのloadイベントだけは実行タイミングがまちまちのようである。 jQueryのloadイベントはHTMLの読み込みに加えて、画像などの外部ファイルの読み込みが完了した時点で実行されるものだが、 画像ファイルが小さく瞬時にロードできた場合などはJavascriptのonloadや$(function())より先に実行されることがあるようである。
