技術空間

jQuery

jQueryでHTML読み込み完了後にスクリプトを実行する


TOP > jQuery > jQueryでHTML読み込み完了後にスクリプトを実行する



■jQueryの構文

jQueryでHTML読み込み完了後にスクリプトを実行したい場合、いくつか構文がある。

最もよく使われるのが下記。この中に記述したスクリプトがHTML読み込み完了後に実行される。

$(function(){
  ・・・
});

「$」は「jQuery」の略なので、下記も同じ。

jQuery(function(){
  ・・・
});

readyイベントを使う方法もあり。

$(document).ready(function(){
  ・・・
});

3つとも動作に違いはないが、一般的には最初の$(function(){・・・を使う。特別な理由がない限りこれを使っていればよいだろう。

また画像などの外部ファイルも含め、すべて読み込んだ時点で実行したい場合は、下記のように記述する。 前述の3つと実行順序の前後関係はないようである。(画像が即時に表示される場合は、前述3つよりも早く実行されることもあるよう)

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

なお下記の記述方法は、jQuery3.0以降は廃止されている。

$(window).load(function() {
  ・・・
});


TOP > jQuery > jQueryでHTML読み込み完了後にスクリプトを実行する

Tweet ̃Gg[͂ĂȃubN}[Nɒlj
技術空間