【jQuery】存在しない画像をNo Image画像に置き換える方法

リンク切れした画像はブラウザごとに微妙な違いはありますが
大体のものがこんな表示になります。

リンク切れさせないことが第一ですが、万が一を考えてNo Imageのような画像があると安心です。
今回はリンク切れ画像を別の画像に置き換える方法を紹介します。

リンク切れをチェックさせたい画像に特定クラスを持たせる

下記の例では check というクラスを持たせました。
この check クラスを持つ画像を対象にしたjQueryを用意していきます。

<img src="./test.jpg" class="check" alt="image1" />

特定クラスを持つ画像がリンク切れであれば置き換える

画像がリンク切れかどうか判別するには error メソッドを利用します。
画像に限らず、errorメソッドはjavascriptのエラーが発生したときに発火するイベントです。

$("リンク切れか確認したい画像").error(function(){
  //リンク切れした場合の処理
});

このerrorメソッドを使い、画像のリンク切れの場合、No Image画像に置き換えるようにします。
画像の置き換えは簡単で、属性を書き換えてあげるだけです。

<img src="./存在しない画像パス" class="check" alt="image1" />

$(document).ready(function(){
	$('img.check').error(function() {
		$(this).attr({
			src: 'no_image.gif',
			alt: 'NoImage',
			class: ''
		});
	});
});

特定要素内の画像がリンク切れであれば置き換える

要素単位で指定することも可能です。
ページ上の全ての画像を対象とする場合は、$('img') と指定するだけ。

<div class="content">
	<img src="./存在しない画像パス" alt="image1" />
</div>

$(document).ready(function(){
	$('.content img').error(function() {
		$(this).attr({
			src: 'no_image.gif',
			alt: 'NoImage',
			class: ''
		});
	});
});

これだけでOKです。