jQueryの基本 - $(document).ready

よく、プラグインの使用方法などで以下のような記述を見ることがあると思います。

$(document).ready(function(){
  //何かしらの処理
});

これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。

jQuery(JavaScript)はHTMLが完全に読み込まれないまま何か処理を実行すると大抵正しく動作しません。なのでこのreadyを使うことになります。

$(function(){
  //なにかしらの処理
});


jQuery(document).ready(function() {
//なにかしらの処理
});

jQuery(function(){
  //なにかしらの処理
});

上記３つの書き方も同じ動作をします。HTMLの読み込みが終わった時点で //なにかしらの処理 が実行されます。

$(document).ready(function(){
  $(".scroll").smoothScroll();
});

$(document).ready(function(){
  $("#slider").slider();
});

$(document).ready(function(){
  $("#nav").nav();
});

ちなみに、このようにreadyを何度も書く必要はなく

$(document).ready(function(){
  $(".smooth").smoothScroll();
  $("#slider").slider();
  $("#nav").nav();
});

//もしくは

$(function(){
  $(".smooth").smoothScroll();
  $("#slider").slider();
  $("#nav").nav();  
});

このようにまとめて書けます。こちらのほうが管理面で圧倒的に良いと思います。

$(window).loadとの違い

$(window).load()はページのすべての要素、つまり画像などがすべてロードされた段階でイベントが発火されます。

それぞれのイベントの順番をまとめるとしたのようになります。

1. ページの読み込みが始まる
2. HTMLの読み込みが終わる
3. $(document).readyが実行
4. 画像など含めすべてのコンテンツの読み込みが終わる
5. $(window).loadが実行

$(window).loadは一番最後に実行されます。そのページが、大量のコンテンツを読み込む場合など、なかなか処理が実行されないことがあります。

なので、ユーザの使い勝手を考えたら$(document).ready()を使うほうが良いと思います。

$(window).loadを使うケース

jQueryやJavaScriptの処理によっては、ページが完全に読み込まれなければ処理が正しく実行されないようなものもあります。

画像に何か処理をかけるようなプラグインで、その幅や高さを計測して処理を実行するようなものがあるとします。画像が完全に読み込まれなければ幅や高さがとれないので、$(document).ready()のタイミングで処理を実行すると誤動作をします。そういったケースには$(window).loadです。

$(document).readyの実態

readyはいったいjQueryの中でどういった処理をしているのか、jQueryのソースコードを斜め読みしてみました。

jquery/jquery

src/core/ready.js

おそらく以下の記述でイベントをフックしているのだと思います。

ready.js 73行目近辺

// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed );

// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );

DOMContentLoadedというイベントが発火したタイミングで設定したfunctionを実行するような処理を行っているようです。

ちなみにDOMContentLoadedでイベントハンドラ呼び出しが失敗した場合。windowのloadイベントでもイベントハンドラが呼ばれる多段構成になっているみたいです。安心設計ですね！

DOMContentLoadedとは

Mozillaから説明を引っ張ってきました。

Window: DOMContentLoaded イベント - developer.mozilla.org

DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

特に難しいことは書いてありませんね。

サブフレーム だけ説明します。
現在開いているウィンドウをメインフレーム、メインフレームから開かれている別ウィンドウをサブフレームと呼ぶそうです。例えばiframeで開かれているウィンドウがそれにあたります。