115
96

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTMLの読み込みが完了してから実行

Last updated at Posted at 2014-07-15
(window.onload = function() {
    
})();

ブラウザは上から順番に実行する。<script>タグを見つけたら優先的に実行しようとするので書き方によってはHTMLの要素が作られる前にJavaScriptを実行してしまうのでエラーになる場合がある。そこでwindow.onloadと書くことでHTMLの読み込みが完了してから実行される。冒頭の(と文末の)();は中の関数が他に影響しないようにガッチリ固定させる即時関数。

「今は深く考えず、おまじないとして覚えるべし」ということです。

(追記)
alucky0707さんから今回の書き方だと2回も実行されてしまうため、よろしくないというアドバイスをいただきました。文頭の()();を削除してwindow.onload = だけを使用するほうがが良いそうです。

window.onload = function () {
  // ここに読み込み完了時に実行してほしい内容を書く。
};

新しい方法だとjQueryを利用した

$(function () {
  // ここに処理を書く
});

という書き方もあるそうです。

115
96
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
115
96

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?