jQueryにはデータが読み込まれたタイミングでイベントが発火する読み込みイベントがあります。読み込みイベントには、ready()、load()、unload()の3つのイベントがあります。
読み込みイベントが扱えるようになると、データ読み込み完了と同時にイベントを発火させることができるようになります。
この記事で基礎知識をインプットしましょう！
- jQueryのready/load/unloadの使い方
目次
jQueryのready()イベントの使い方
ready()イベントは、DOMがロードされて操作・解析が可能になったタイミングでイベントが発火します。
DOM（Document Object Model）とは、HTMLの要素（pタグはimgタグなど）にアクセスする仕組みのことです。
基本書式
$(document).ready(function(){
// DOMがロードされて操作・解析が可能になったときに実行させたい処理内容
});コードを実際に当てはめると、次のようになります。
$(document).ready(function () {
console.log("ready!");
});出力結果
$(document)で、HTMLの内容を取得しています。HTMLの内容を取得したらイベントが発火します。
jQueryのload()イベントの使い方
load()イベントはDOMがロードされ画像などのデータの読み込み完了後にイベント発火します。
基本書式
$(window).on(‘load’,function(){
// DOMがロードされ画像などのデータの読み込み完了後に実行させたい処理内容
});コードを実際に当てはめると、次のようになります。
$(window).on("load", function () {
console.log("load!");
});出力結果
読み込みが完了すると、コンソール画面でメッセージが表示されます。
jQueryのunload()イベントの使い方
unload()イベントはページが閉じられたり、ページから移動した場合などにイベントが発火します。
基本書式
$(window).on(“unload”,function(){
// ページが閉じられたり、ページから移動した場合などに実行させたい処理内容
});コードを実際に当てはめると、次のようになります。
$(window).on('unload', function () {
console.log("unload!");
});出力結果
ページを更新すると、コンソール画面で一瞬だけメッセージが表示されます。
ready()とload()はどちらがイベント発火が早いか
ready()とload()はどちらも読み込んでからイベントが発火します。この2つのイベント発火のタイミングは、ready()イベントのほうが早いです。
次のコードで動作を確認してみます。
<div class="ready">readyで読み込み</div>
<div class="load">loadで読み込み</div>$(document).ready(function () {
$(".ready").css("background", "red");
});
$(window).on("load", function () {
$(".load").css("background", "blue");
});出力結果
ページを読み込むと、まずready()イベントが発火し、その次にload()イベントが発火しているのが分かります。なので、ready()イベントのほうがload()イベントよりも発火のタイミングが早いです。
まとめ
読み込みイベントは、データが読み込まれたタイミングでイベントが発火する便利なイベントです。ready()イベントとload()イベントは発火のタイミングが違いますので、状況に応じて使い分けていきましょう。その他のさまざまなイベントと組み合わせて使用しましょう！
jQueryのready/load/unloadまとめ
ready()：DOMがロードされて操作・解析が可能になったタイミングでイベントが発火load()：DOMがロードされ画像などのデータの読み込み完了後にイベント発火unload()：ページが閉じられたり、ページから移動した場合などにイベントが発火ready()とload()は、ready()のほうが発火のタイミングが早い
