No.210

画面描画後の関数の実行タイミングを把握しよう

　jQueryで画面描画時に処理が実行されるタイミングは3つ。

　理解しないで使っていると大変な目に遭うので注意しよう。

HTMLの描画が終了した時点でイベント起動

　画面上のHTMLが全て表示される = DOMが出そろった時点で発生するイベントを捕まえることができる。

　HTML要素が出そろっただけなので、画像などのHTMLと平行して読み込まれてくる要素に対しての制御は厳禁。

　イベントはreadyメソッドで捕まえる。

$(function(){
  alert("HTML描画終了");
});
もしくは
$(document).ready(function(){
  alert("HTML描画終了");
});

　この二種類の書き方は等価なのでどちらを使ってもOK。

全要素の描画が終了した時点でイベント起動

　DOMだけでなく画像などの要素の読み込み・描画まで完了した時点で発生するイベントを捕まえることができる。

　画像などの描画が終了しているので、画面や特定レイヤーの縦横などの要素が設定されている。画面やレイヤーの大きさ制御などはこのイベントのタイミングで行おう。

　イベントはloadメソッドで捕まえる。

$(window).load(function () {
  alert("全要素描画終了");
});

処理が読み込まれた時点で実行

　上記のようにreadyやloadといったイベント駆動ではなく、ソース中にべた書きされている場合、その処理が読み込まれた時点でその処理は実行される。　

<script>
  alert("この行が読み込まれた");
</script>

　画面に描画されているHTMLは保証されないので、特定のDOMに対する処理を書くのは厳禁。