HTML・CSS・Javascript

【jQuery】画像が404エラーの時、別の画像を表示する方法

  • このエントリーをはてなブックマークに追加

クライアントより、動的に一覧ページに複数の画像を掲載したいというご要望がありました。

動的ページなので画像名もパターン化されているので、表示することはできるのですが、画像名パターンに当てはまらない場合も出てくるとのことで、jQueryのerror()を使うことでクリアにしました。

■画像名パターン
/images/0001-a1.jpg
/images/0001-b1.jpg

0001-a1.jpgの画像名を-b1.jpgに変換してimgsrc変数へ格納する

格納したら画像のsrcをimgsrcに書き換えれば2枚目の画像を表示できるのですが、なかには画像名パターン「-b1.jpg」がない場合もあると思います。
そんな時はerror()を利用して、別の画像を表示します。

画像を非表示にしたい場合はこちらをご参考ください。

  • このエントリーをはてなブックマークに追加