画像が読み込めないときにjQueryで違う画像を読みに行く方法

プロモーションが含まれています

画像が読み込めないときにjQueryで違う画像を読みに行く方法

メイクショップで画像パスの仕様変更があり、旧仕様と新仕様が混在してしまって1パターンな方法ではうまくいかないときの対処法

はじめに

html

<img src="http://gigaplus.makeshop.jp/shopname/shopimages/1_000000006555.jpg" class="pic">

デフォルトのimgタグが旧仕様のパスです。
この画像が読み込めないときに新仕様のパスで取りに行きます。

画像が読み込めないときに違う画像を読みに行く

js

$(".pic").error(function(){
    var imgpath = 'http://gigaplus.makeshop.jp/shopname/shopimages/sample.jpg';
    $(this).attr('src' , imgpath);
});

class=”pic”の画像が読み込めないときに違う画像を読み込んでいます。
【jquery】リンク切れしている画像を消す + IEで消えない対策の記事の画像を消すのを違う画像を読むのに変更しただけですね!

基本のimgタグを変更して対応しやすくする

html

<img src="http://gigaplus.makeshop.jp/shopname/shopimages/1_000000006555.jpg" class="pic" alt="000000006555">

新仕様ではシステム商品コードが必要なのでaltに埋め込んでいます。
うちではaltを使っていないのと、メイクショップはXhtmlなのでaltに入れています。
title属性だと邪魔になるし、html5のdata属性だと微妙ですしね。

js

$(".pic").error(function(){
    var alt = $(this).attr('alt');
        alt0 = alt.slice(-4);
        alt1 = alt0.slice(0,2);
        alt2 = alt0.slice(-2);
    var imgpath = 'http://gigaplus.makeshop.jp/shopname/shopimages/'+alt2+'/'+alt1+'/1_'+alt+'.jpg';
    $(this).attr('src' , imgpath);
});

システム商品コードをいじくって新仕様のパスを作ります。
仕様の説明は面倒なので割愛します。

これを追加するだけで対応できちゃいますね!
商品ページとかなら独自タグが自動でやってくれますけど独自ページとなると面倒が多いですね。
商品の比率が新仕様のほうが多くなった時に今度は逆に新仕様じゃなかったらパターンで作り直したほうがよさそうですね。

コメント

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