[jQuery]リンク切れ画像に代外画像を表示

Java Script


制作途中のサイトで、まだ画像が用意されていない段階でもコードの方は先に書くことがあると思います。
用意されていない画像に対してPlacehold.jpでダミー画像を当てておくこともありますが、最終的な画像ファイル名を想定してそのURLを入れておき、用意できた画像のファイル名をリネームしてアップすれば良いだけにしておくこともたまにあります。
ただその場合、もちろん画像がないのでリンク切れで画像が表示されません。

そんなとき、リンク切れの画像に対しては代替えとしてダミー画像を置くことができます。

以下のjQueryを加えればOK。

[code]$(document).ready(function() {
$(‘img’).error(function() {
$(this).attr(‘src’,’https://placehold.jp/400×300.png’);
});
});[/code]

あまりない事ですが、その他にも直リンクした画像が消えた場合の保険などにも使えそうですね。

タイトルとURLをコピーしました