jQueryでのreadyやloadイベント【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのreadyやloadイベントについて、簡単に解説していきます。

readyとloadイベント

jQueryでreadyやloadイベントを目にする機会が多々あると思います。

readyイベントは、DOMの準備が完了した後に発火するイベントとなります。

一方で、loadイベントは画像も含めたすべての準備が完了した後に発火します。

readyイベントの書き方

readyメソッドでreadyイベント時に処理を実行できます。

readyメソッドでは引数に実行したい関数(無名関数可)を指定します。

$(document).ready(function(){
  // 処理を書く
});

上記のコードのように、readyメソッドの対象要素は$(document)とします。

loadイベントの書き方

loadイベント時の処理はonメソッドを使います。

onメソッドでは第一引数にload、第二引数に関数を指定します。

$(window).on('load', function() {
  // 処理を書く
}

上記のコードの例のように、onメソッドの対象要素は$(window)とします。