【jQuery入門】画像が読み込めない場合のエラー処理を実装する(エラーハンドリング)

画像ロードに失敗した場合に代替画像を表示する

JavaScriptでは、ページでなんらかのエラーを検知した場合に、errorイベントを発生します。なんらかのエラーとは、例えばimg要素で存在しない画像パスをした場合など。

以下では３枚目の画像をクリックした際に、ダミーの画像を表示します

<ul id="list">
  <li><img src="https://placehold.jp/50x50.png" alt=""></li>
  <li><img src="https://placehold.jp/60x60.png" alt=""></li>
  <li><img src="htt://placehold.jp/70x70.png" alt=""></li>
  <li><img src="https://placehold.jp/80x80.png" alt=""></li>
  <li><img src="https://placehold.jp/90x90.png" alt=""></li>
</ul>
<hr>
<img id="big">

$(function () {
  $("#big")
    .on("error", function () {
      $(this).attr("src", "https://placehold.jp/100x100.png");
    })
    .attr("src", $("#list img:first-child").attr("src"));
  $("#list img").click(function () {
    $("#big").attr("src", $(this).attr("src"));
  });
});

#list {
  margin: 0px;
  padding: 0px;
}

#list li {
  margin: 2px;
  height: 40px;
  list-style-type: none;
  float: left;
}

#list img {
  width: 55px;
  height: 40px;
}

hr {
  clear: both;
}

#big {
  width: 315px;
  height: 235px;
}

onメソッドとは、イベント処理を記述するための汎用メソッドで、clickやmousemoveのようなメソッドも、onメソッドで置き換えることが可能

See the Pen
jQuery12-4 by shinjiezumi (@sezumi)
on CodePen.

イベント処理を無効化する

onメソッド、またはclick/mouseoverのような簡易メソッドでイベントに関連づけられた処理は、offメソッドで無効にすることもできる

これによって、$('#big2')に関連付いたerrorイベントの処理が取り消される。

ちなみにイベント名を省略した場合には、イベントの種類にかかわらず、その要素に関連付いたすべてのイベント処理が無効になる

<ul id="list2">
  <li><img src="https://placehold.jp/50x50.png" alt=""></li>
  <li><img src="https://placehold.jp/60x60.png" alt=""></li>
  <li><img src="htt://placehold.jp/70x70.png" alt=""></li>
  <li><img src="https://placehold.jp/80x80.png" alt=""></li>
  <li><img src="https://placehold.jp/90x90.png" alt=""></li>
</ul>
<hr>
<img id="big2">

$(function () {
  $("#big2")
    .on("error", function () {
      $(this).attr("src", "https://placehold.jp/100x100.png");
    })
    .attr("src", $("#list2 img:first-child").attr("src"));
  $("#list2 img").click(function () {
    $("#big2").attr("src", $(this).attr("src"));
  });
  $("#big2").off("error");
});

#list2 {
  margin: 0px;
  padding: 0px;
}

#list2 li {
  margin: 2px;
  height: 40px;
  list-style-type: none;
  float: left;
}

#list2 img {
  width: 55px;
  height: 40px;
}

hr {
  clear: both;
}

#big2 {
  width: 315px;
  height: 235px;
}

See the Pen
jQuery13-1 by shinjiezumi (@sezumi)
on CodePen.

その他、知っておきたいイベント関係のメソッド

mouseenter／mouseleaveイベントをまとめて設定するhoverメソッド

hoverメソッドは、mouseenter／mouseleaveイベントをまとめて設定するためのメソッド。

hoverメソッドを利用することで、これらのイベントをよりスマートに設定できるようになる

コード量がそれほど大きく変わるわけではないが、視覚的にもワンセットであることが明確にわかり、複雑なコードも読みやすくなる。

そのためmouseenter／mouseleaveイベントの処理はなるべくhoverメソッドを利用する

<img id="img" src="https://placehold.jp/50x50.png" alt="" />

$(function () {
  $("#img").hover(
    function () {
      // mouseenterに対応する処理
      $(this).attr("src", "https://placehold.jp/60x60.png");
    },
    function () {
      // mouseleaveに対応する処理
      $(this).attr("src", "https://placehold.jp/50x50.png");
    }
  );
});

See the Pen
jQuery13-2 by shinjiezumi (@sezumi)
on CodePen.

イベントに応じて一度だけ実行される処理を定義するoneメソッド

あるイベントに対して一度だけ処理を実行したい場合には、oneメソッドを利用する

答えるボタンをクリックすると、テキストボックスへの入力値を確認し、結果に応じた内容をダイアログに表示している

初回のクリックではダイアログが表示されるが、２回目以降はクリックしても反応しないことがわかる

<form id="form" action="">
  <input type="text" id="answer">
  <input type="button" id="btn" value="回答する">
</form>

$(function () {
  $("#form").one("click", function () {
    if ($("#answer").val() === "on") {
      alert("正解");
    } else {
      alert("不正解");
    }
  });
});

まだない要素にもイベント処理を定義するonメソッド

click, mouseoverのような簡易メソッドは、基本的にはすでにある要素に対してだけイベント処理を定義する。

しかしonメソッドのもうひとつの構文を利用すれば、あとから動的に追加される要素に対しても、あらかじめイベント処理を定義しておくことができる。

onメソッドの第二構文は以下のとおり

$(セレクター).on(イベント名, 子セレクター, function(){ ...イベントに対応して行うべき処理... })

これによって「"セレクター"配下の"子セレクター"で指定された要素で"イベント名"が発生した場合に、指定された処理を実行しなさい」という意味になる。

この例であれば、「#form2要素配下にあって、class属性がincrementである要素でクリックイベントが発生した場合、ボタンを追加する」ということ

このような構文を利用することで、イベント処理はあくまで親要素で管理されるため、子要素があとから追加されても、そのイベントを補足できる

この書き方だと追加されたボタンを押下してもボタンが増えるのに対し、従来の書き方の場合は追加された要素を押下しても反応しない

<form id="form2" action="">
  <input type="button" class="increment" value="追加する">
</form>

$(function () {
  $("#form2").on("click", ".increment", function () {
    $('<input type="button" class="increment" value="追加する">').appendTo(
      "#form2"
    );
  });
});

See the Pen
jQuery13-4 by shinjiezumi (@sezumi)
on CodePen.

jQuery1.6以前のコードとの対応関係

onメソッドは、jQuery1.7以降で導入されたメソッドで、jQuery1.6以前では、bind, live, delegateで実現しており、対応関係は以下のとおり

メソッド	1.6以前	1.7以降(onメソッド)
bind	$(selector).bind(event, listener)	$(selector).on(event, listener)
live	$(selector).live(event, listener)	$(document).on(event, selector, listener)
delegate	$(selector).delegate(selector, event, listener)	$(selector).on(event, selector, listener)