jQueryで何気に使っている$(function() {や$(document).ready()$(window).load()などは、読み込みのタイミングに関するイベントです。
決まりごとだからと何も考えずに使っている人も多いかと思いますが、それぞれに意味があり、使わなくてもいい場面もあります。
それらを1つずつ解説していきます。
※load()はブラウザによって動作が保証されないため1.8で非推奨となり3.0で削除されました。on()で使うようになります。
目次
ready()で読み込む
DOMの読み込みが完了したタイミングで関数を実行します。
基本構文
|
1 2 3 |
$(function() { // 〜処理〜 }); |
HTMLを読み込んで、操作できるようになったら「はいどうぞ！」と関数を実行します。
いろいろな書き方
このイベントは以下のようにいくつかの書き方がありますが、すべて同じ動作となります。
※下記構文はjQuery 3.0以降では全て非推奨となりました。それに伴い記事の一部を修正しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// ①$(document).ready()を使う $(document).ready(function() { // 〜処理〜 }); // ②$マークをjQueryに置き換える jQuery(document).ready(function() { // 〜処理〜 }); // 非推奨 $().ready(function() { // 〜処理〜 }); |
①の$(document).ready()は古いソースでたまに見かけますね。
②は$（ドル）マークを使わずに、jQueryと記述しています。
$（ドル）マークを使うと、他のライブラリやプラグインなどとコンフリクト（競合）して誤作動を起こしてしまうことがあり、それを防いでくれます。
wordpress では基本的に$（ドル）マークは使えないためjQueryで記述しますね。
DOMとは？
jQueryでよく登場する「DOM」ですが、イマイチ意味が分かりませんでした。
DOMとは
DOM（Document Object Model）とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。
DOMは、HTMLの要素をjQueryなどのプログラムを使って操作するためのAPIです。
DOMのおかげで、jQueryで簡単にHTMLの要素にテキストを追加したり、要素を削除したりなど、HTMLを直接いじくることができるんですね。
DOMを読み込むタイミングで実行とは、DOMを使ってjQueryでHTMLを操作できるようになったら実行するという意味になります。
ただ、画像などのファイルは後述するload()を使わないといけません。
load() で画像なども読み込む
ready()は、大きな画像などの重いファイルを読み込む前にプログラムが動作してしまい、読み込みが終了していないファイルのサイズ取得が上手くいかないことがあります。
※load()はブラウザによって動作が保証されないため1.8で非推奨となり3.0で削除されました。on()で使うようになります。それに伴い記事の一部を修正しました。
ready()で取得したサイズがおかしい
HTML
|
1 2 |
<!--読み込みに時間がかかる巨大な画像--> <img src="top.jpg" width="4912" height="3264"> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
// DOMが読み込まれたら実行させる $(function() { // 画像の高さを取得して変数に格納 var img = $('img').height(); // コンソールに画像の高さを表示 console.log(img); }); |
結果（コンソール）
0
上記のように、巨大な画像が読み込まれてないままheight()で高さを取得してしまうため、高さが0となってしまいます。
そんなときはload()を使えば、DOMを読み込んだ後も、画像などの全てのファイルを読み込むまで動作を待ってくれます。
load() でサイズもきちんと取得
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
// 画像が読み込まれたら実行させる $(window).on('load', function() { // 画像の高さを取得して変数に格納 var img = $('img').height(); // コンソールにtopの位置を表示 console.log(offset.top); }); |
結果（コンソール）
3264
読み込みに多少時間がかかりますが、上記のように画像の高さが取得できます。
画像のサイズを取得する場合などは、上記のように 画像も読み込んだ後に実行するようにしましょう。
load()はブラウザによって動作が保証されないため1.8で非推奨となり3.0で削除されました。
上記のようにon()の引数に指定することで引き続き使えます。
基本構文
|
1 2 3 4 |
// ページが完全に読み込み終了したら発動 $(window).on('load', function() { // 〜処理〜 }); |
ページ全体ではなく、特定の要素にload()を設定もできます。
|
1 2 3 4 |
// 特定の要素が完全に読み込み終了したら発動 $('#topImg').on('load', function() { // 〜処理〜 }); |
load()は画像なども全て読み込むため、待ち時間も長くなります。
上記のように画像を読みこんだりといった特別な理由がなければready()を使えばよいでしょう。
余分な読み込みは不要
$(function() {を決まりごととして余計なところにまで使うケースを見かけます。
（わたくしもそうでした^^;）
複数イベントは1つにまとめる
複数のjQueryイベントに、1つずつready()やload()を付ける必要はありません。
以下のようにまとめて一括りにして良いでしょう。
×複数のイベントに1つずつ ready()
|
1 2 3 4 5 6 7 8 9 10 |
// 複数のイベントに1つずつ付けるのはムダ $(function() { // 〜処理①〜 }); $(function() { // 〜処理②〜 }); $(function() { // 〜処理③〜 }); |
↓
○複数のイベントを1つにまとめる
|
1 2 3 4 5 6 |
// 複数のイベントを1つにまとめる $(function() { // 〜処理①〜 // 〜処理②〜 // 〜処理③〜 }); |
上記のようにまとめるとスッキリしますね。
<body>タグ終了直前なら不要
以下のようにHTMLのレンダリングの邪魔をしないように、jQueyのコードを<body>タグ終了直前に設置する例はよく見かけますね。
HTML
|
1 2 3 4 5 6 7 8 |
<body> 〜省略〜 <!--bodyタグ終了直前にjQueryを設置--> <script src="js/script.js"></script> </body> </html> |
その場合、既にDOM要素は読み込んでいるため、改めてreadyイベントを記述する必要はないでしょう。
jQuery
|
1 2 3 4 |
// body終了直前はDOMも読み込み終了しているため不要 $(function() { // =>不要 // 〜処理〜 }); |
$(function() {は外してしまいましょう。
