js STUDIO

.ready()

DOMが全てロードされてDOMにアクセスできる準備が出来た段階で実行させたい処理を関数で指定します。

$.ready( handler ) 1.0追加

戻り値:jQuery

引数 説明
handler DOMの準備が完了した際に実行したい関数を指定します。

下記は、.ready()メソッドが無名関数とセットで使用される典型的な例です。 

$(document).ready(function() {
  // .ready()イベント発生時に実行したい処理
});

また、上記コードは下記のように書くことも出来ます。 

$(function() {
 // .ready()イベント発生時に実行したい処理
});

別のjavaScriptライブラリを使用したい場合、$.noConflict()で名前空間の衝突を避けます。 このメソッドを使用した場合、jQueryの略式である「$」の使用ができなくなります。 ただし、.ready()の引数にはグローバルのjQueryオブジェクトを指定して、他のコードに影響を与えること無く 自由に名前を変えて.ready()のイベントハンドラ内で使用することが出来ます。 

jQuery(document).ready(function($) {
  // $を使用した通常のjQuery処理を記述します
});

補足事項

JavaScriptは、ページがレンダリングされるタイミングでコードを実行するためのloadイベントを提供していますが、 画像などのすべてのリソースを完全に受信するまで、このイベントは実行されません。 殆どの場合、DOM階層が完全に構築された時点で出来るだけ早くスクリプトが実行されるのが望ましいでしょう。 ready()はDOMの準備が整い、他の全てのイベントハンドラが登録され、また他の全てのjQueryコードが読み込まれたベストなタイミングで イベントハンドラを実行することを保証してくれます。 CSSスタイルプロパティの値に依存するスクリプトを使用する際には、スクリプトを参照する前に外部スタイルシートまたは 埋め込みスタイルの要素を参照することは重要です。

もし処理が画像のサイズに依存するようなものであれば、.ready()ではなく.load()を使用すべきです。

一般的に、.ready()は<body onload="">とは共存できません。 どうしてもloadイベントを使用したいのであれば、.ready()の使用をやめるか、jQueryの.load()メソッドを windowやimageのような要素に対して紐付けてるようにしてください。

下記の3つの書き方はどれも同じ実行結果になります。

  • $(document).ready(handler)
  • $().ready(handler) (非推奨)
  • $(handler)

また、 $(document).bind("ready", handler)という書き方はjQuery1.8以降では非推奨です。 .ready()メソッドは現ページのDocumentオブジェクトからセレクタが指定されていない状況で使用されるべきです。

デモ

DOMの読み込みが完了したら、メッセージを表示します。 

<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  $(document).ready(function () {
  $("p").text("DOMの読み込みが完了し、操作可能な状態になりました。");
});
</script>
</head>
<body>
  <p>まだ、ロードが完了していません。</p>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM