ページ読み込み時のJavaScriptの実行タイミング

このエントリーをはてなブックマークに追加

HTMLページを読み込む際のJavaScriptの実行タイミングは色々あります。 タイミングをミスると意図したように動作しないことがあるので注意が必要です。

いくつかパターンを見ていきます。

通常実行

特に意識せずにJavaScriptを記述したり読み込んだりすると、書いた順番に処理されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
  <title>Title</title>
  <script type="text/javascript" src="main.js"></script>
  <!-- ↑このタイミングで実行される -->
</head>
<body>
  <script type="text/javascript">
  <!--
  var element = document.getElementById("ears");
  element.innerHTML = "∧__∧";
  // -->
  </script>
  <!-- ↑このタイミングで実行される -->

  <div id="ears"></div>
  <div id="face"></div>

  <script type="text/javascript">
  <!--
  var element = document.getElementById("face");
  element.innerHTML = "(・∀・)";
  // -->
  </script>
  <!-- ↑このタイミングで実行される -->
</body>
</html>

上記のHTMLを読み込むと、(main.jsの中身は空として)画面には何が表示されるでしょうか?

正解は、

1
(・∀・)

と表示されます。

耳が表示されないのは

1
var element = document.getElementById("ears");

の時点ではまだ

1
<div id="ears"></div>

が読み込まれておらず、指定できないからです。

ソースの可読性やMVCといった観点から、HTML内に直接JavaScriptを記述するのは好ましくありません(持論)。 なので通常は<head>タグ内で外部JSファイルを読み込む形になると思いますが、 何も意識せずに書くと、上記のような問題が発生します。

そこで、HTMLが読み込まれたにJavaScriptを実行する必要があります。

読み込み後実行

jQueryを用いて下記のように記述すると、HTMLが全て読み込まれた後にJavaScriptを実行できます。 3パターン挙げますが、全て処理は同じです。

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
  // 読み込み後に実行する処理
});

$().ready(function(){
  // 読み込み後に実行する処理
});

$(function(){
  // 読み込み後に実行する処理
});

個人的には一番下がシンプルで好みです。

これを使って先程のコードを書き直してみると

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
  <title>Title</title>
  <!-- jQueryの読み込みが必要 -->
  <script type="text/javascript" src="lib/jquery/jquery.js"></script>
  <script type="text/javascript" src="main.js"></script>
  <script type="text/javascript">
  <!--
  $(function() {
      var element = document.getElementById("ears");
      element.innerHTML = "∧__∧";
      element = document.getElementById("face");
      element.innerHTML = "(・∀・)";
  });
  // -->
  </script>
</head>
<body>
  <div id="ears"></div>
  <div id="face"></div>
</body>
</html>

処理の記述は<div>より先ですが、HTMLが読み込まれた後に実行されるので、表示結果は

1
2
∧__∧
(・∀・)

となります。(ずれてるけど)

完全読み込み後実行

HTMLだけでなく、全ての関連ファイルを読み込んだ後に実行する処理を書くこともできます。

1
2
3
window.onload = function() {
  // 完全読み込み後に実行する処理
}

場合によって上手く使い分けましょう!

Comments