jQueryで使われる読み込みイベントの一覧を紹介します。
読み込みイベントはデータが読み込まれたタイミングでイベントが発火します。読み込みイベントには、ready()、load()、unload()、error()の4つがあります。
この記事で基礎知識をインプットしましょう！
また、各セクションでjQueryのイベントごとの解説記事を紹介していますので合わせてご一読ください。
- jQueryの読み込みイベントの基礎知識
【jQuery】読み込みイベントの一覧
jQueryの読み込みイベントは、次のようなものがあります。
ready()：DOMがロードされて操作・解析が可能になったタイミングでイベントが発火load()：DOMがロードされ画像などのデータの読み込み完了後にイベント発火unload()：ページが閉じられたり、ページから移動した場合などにイベントが発火error()：エラーが発生したときにイベント発火
それぞれのイベントについて簡単に紹介していきます。
readyイベントについて
ready()イベントは、DOMがロードされて操作・解析が可能になったタイミングでイベントが発火します。
ready()の基本書式
$("要素").readyl(function(){
// DOMがロードされて操作・解析が可能になったときに実行させたい処理内容
});コードを実際に当てはめると、次のようになります。
$(document).ready(function () {
console.log("ready!");
});出力結果
ready()については、下記の記事でも紹介しています。
load()イベントについて
load()イベントは、DOMがロードされ画像などのデータの読み込み完了後にイベント発火します。
load()の基本書式
$(window).on("load",function(){
// DOMがロードされ画像などのデータの読み込み完了後に実行させたい処理内容
});コードを実際に当てはめると、次のようになります。
$(window).on("load", function () {
console.log("load!");
});出力結果
load()については、下記の記事でも紹介しています。
unload()イベントについて
unload()イベントは、ページが閉じられたり、ページから移動した場合などにイベントが発火します。
unload()の基本書式出
$(window).on("unload",function(){
// ページが閉じられたり、ページから移動した場合などに実行させたい処理内容を記述
});コードを実際に当てはめると、次のようになります。
$(window).on("unload", function () {
console.log("unload!");
});出力結果
unload()については、下記の記事でも紹介しています。
error()イベントについて
error()イベントは、エラーが発生したときにイベントが発火します。
error()の基本書式
$("要素").on("error",function(){
// エラーが発生したときに実行させたい処理内容を記述する
});上の書式にコードを当てはめると次のようになります。
<div class="imgbox">
<img src="" alt="">
</div>
<button>click!</button>$("button").click(function () {
$("img").on("error", function () {
console.log("画像が読み込まれませんでした");
}).attr("src", "dummy.png");
});出力結果
error()については、下記の記事でも紹介しています。
読み込みイベント一覧のまとめ
読み込みイベントは、データが読み込まれたタイミングでイベントが発火する便利なイベントです。readyやloadなど似たようなイベントがありますが、状況に応じて使い分けていきましょう。基礎知識をインプットして実際に手を動かしてみましょう。
jQueryにはその他のさまざまなイベントがあるので、組み合わせて使用しましょう！
見Query読み込みイベントまとめ
ready()：DOMがロードされて操作・解析が可能になったタイミングでイベントが発load()：DOMがロードされ画像などのデータの読み込み完了後にイベント発火unload()：ページが閉じられたり、ページから移動した場合などにイベントが発error()：エラーが発生したときにイベント発火
