jQueryのready()やload()のタイミングの違い

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryで何気に使っている$(function() {$(document).ready()$(window).load()などは、読み込みのタイミングに関するイベントです。

決まりごとだからと何も考えずに使っている人も多いかと思いますが、それぞれに意味があります。

それらを1つずつ解説していきます。

 

load()はブラウザによって動作が保証されないため1.8で非推奨となり3.0で削除されました。on()で使うようになります。

ready()で読み込む

DOMの読み込みが完了したタイミングで関数を実行します。

基本構文

HTMLを読み込んで、操作できるようになったら「はいどうぞ!」と関数を実行します。

いろいろな書き方

このイベントは以下のようにいくつかの書き方がありますが、すべて同じ動作となります。

①のready()を省略した書き方はよく見かけますね。

②は$(ドル)マークを使わずに、jQueryと記述しています。

$(ドル)マークを使うと、他のライブラリやプラグインなどとコンフリクト(競合)して誤作動を起こしてしまうことがあり、それを防いでくれます。

wordpress では基本的に$(ドル)マークは使えないためjQueryで記述しますね。

DOMとは?

jQueryでよく登場する「DOM」ですが、イマイチ意味が分かりませんでした。

DOMとは

DOM(Document Object Model)とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。

出典:DOMとは – JavaScript超初心者によるJavaScript入門講座

DOMは、HTMLの要素をjQueryなどのプログラムを使って操作するためのAPIです。

DOMのおかげで、jQueryで簡単にHTMLの要素にテキストを追加したり、要素を削除したりなど、HTMLを直接いじくることができるんですね。

 

DOMを読み込むタイミングで実行とは、DOMを使ってjQueryでHTMLを操作できるようになったら実行するという意味になります。

ただ、画像などのファイルは後述するload()を使わないといけません。

load() で画像なども読み込む

ready()は、大きな画像などの重いファイルを読み込む前にプログラムが動作してしまい、読み込みが終了していないファイルのサイズ取得が上手くいかないことがあります。

load()はブラウザによって動作が保証されないため1.8で非推奨となり3.0で削除されました。on()で使うようになります。それに伴い記事の一部を修正しました。

ready()で取得したサイズがおかしい

HTML

jQuery

 結果(コンソール)

0

上記のように、巨大な画像が読み込まれてないままheight()で高さを取得してしまうため、高さが0となってしまいます。

そんなときはload()を使えば、DOMを読み込んだ後も、画像などの全てのファイルを読み込むまで動作を待ってくれます。

参考:jQueryでコンソールログを使ったデバッグ方法

load() でサイズもきちんと取得

jQuery

結果(コンソール)

3264

読み込みに多少時間がかかりますが、上記のように画像の高さが取得できます。

画像のサイズを取得する場合などは、上記のように 画像も読み込んだ後に実行するようにしましょう。

load()はブラウザによって動作が保証されないため1.8で非推奨となり3.0で削除されました。

上記のようにon()の引数に指定することで引き続き使えます。

参考:jQueryで高さの取得と設定

基本構文

ページ全体ではなく、特定の要素にload()を設定もできます。

load()は画像なども全て読み込むため、待ち時間も長くなります。

上記のように画像を読みこんだりといった特別な理由がなければready()を使えばよいでしょう。

余分な読み込みは不要

$(function() {を決まりごととして余計なところにまで使うケースを見かけます。

(わたくしもそうでした^^;)

複数イベントは1つにまとめる

複数のjQueryイベントに、1つずつready()load()を付ける必要はありません。

以下のようにまとめて一括りにして良いでしょう。

×複数のイベントに1つずつ ready()

○複数のイベントを1つにまとめる

上記のようにまとめるとスッキリしますね。

<body>タグ終了直前なら不要

以下のようにHTMLのレンダリングの邪魔をしないように、jQueyのコードを<body>タグ終了直前に設置する例はよく見かけますね。

HTML

その場合、既にDOM要素は読み込んでいるため、改めてreadyイベントを記述する必要はないでしょう。

jQuery

$(function() {は外してしまいましょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*