This is standard

KAIZEN PLATFORM社が提供するA/Bテストプラットフォームにてグロースハックを行っているフリーランサーのサイトです。

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

   

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

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

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

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

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

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

 - HTML・CSS・Javascript

  関連記事

よく使うCSSジェネレーターと参考サイト

よく使うジェネレーターと参考サイトを自分用にまとめました。 ・グラデーションジェ …

LPで使えるjQueryアニメーションボタン2

ボタンにきらっと光るアニメーションを入れる方法をご紹介します。 デモページはこち …

ECサイトで使いたい!カウントダウンをjavascriptで実装する

新作商品販売まで後◯◯日!のようなカウントダウンをjavascriptで実装する …

スクロールしてYouTubeを自動再生する方法

YouTube動画付近までスクロールすると自動再生する方法をご紹介します。 DE …

【ECサイト】javascriptで出荷日時を自動で表示する方法

Amazonをはじめ、多くのオンラインショップで即日配送を実施されてますよね。 …

FutureShop2のfs2api.jsを利用してユーザー名を取得する方法

FutureShop2にはfs2api.jsが用意されていて、ユーザー名などログ …

ChromeのconsoleでjQueryを使う方法

Google ChromeのconsoleでjQueryをつかってDOM操作した …

CSS3で立体ボタンを作成する

立体デザインボタン 昨今のフラットデザインの流れでボタンと認識できず、CTRが下 …

RSS feedのエラーチェック

WordPressのfeedを使ってニュース記事を表示させていたのですが、エラー …

LPで使えるjQueryアニメーションボタン

LPでgifアニメーションボタンが一時流行りましたが、ボタンを作るのは結構時間も …