【jQuery】画像のリンク切れに備えるための簡単なjQueryコード。

画像の引用が多いサイトで使える便利なコードを紹介します。

たった１行で、画像のリンク切れを回避できる jQuery のコードです。

画像が読み込まれないときに代替画像を表示

<head>〜</head> 内に以下を記述します。

$('img').error(function() {
	 $(this).attr('src',‘thumbnail.png’);
});

これでドキュメント内の <img> タグをすべて参照し、エラー（リンク切れ）があった場合には src に任意の画像を挿入してくれます。

次は読み込まれない画像のimgタグそのものを非表示（削除）してしまう方法です。

$('img').error(function() {
	$(this).remove();
});

あくまでも応急処置的なテクニックです。例えばサイトをWordPressベースで構築しているのであれば、プラグインの［Broken Link Checker］などと組み合わせれば、『リンク切れ』に対して万全の体制を整えられます。

こちらが［Broken Link Checker］へのリンクです。

Plugin Directory : Broken Link Checker

最も簡単に［Broken Link Checker］を導入するには、管理画面（ダッシュボード）の左側にあるメニュー「プラグイン」→「新規追加」からインストールする方法をオススメします。

右上に「プラグインの検索」という検索フォームがあるので、ここに「Broken Link Checker」と入力すると対象のプラグインが表示されます。