jQueryでリンク切れしている画像を削除して表示させない

Tweet

237

imgタグを使って画像を表示しているときに、画像が存在しな場合にjQueryを使って何かアクションを起こせるように出来ます。例えば imgタグを囲うような形でHTMLが組まれていて、それがデザイン的に画像のリンク切れが発生していると見た目がかなり悪くなる時があります。そんな時に、こちらの方法を使うと便利です、また代替の画像に入れ替えたりも可能です。

jQueryで画像のリンク切れ処理を行う

$(document).ready(function() {
  $('.photo img').error(function() {
    //該当の要素を削除する
    $(this).parents(".box").remove();
  });
});

jQueryには .error() というのが存在しています、こちらを使うことでエラーが発生した時に、何かを実行させることが出来ます。imgタグのsrcがリンク切れしている場合にエラーが出ますので、それを利用してアクションを起こします

上記のコードで次のHTMLの時の動作

<div class="box">
  <div class="photo">
    <img src="no" alt="">
  </div>
</div>

HTMLがこのようになっている場合には、上記のjQueryのコードでは。リンク切れ.photo 以下にある img を探し出します。そしてそのimgにエラーがあった場合に先祖の .box ごと削除するという事になります

parents() を使うと、thisに当たる要素の先祖を辿って行くことが出来ます、クラス名を引数として渡すことでそのクラスを持っている親要素にアクションを起こせます。

Tweet

短縮URL:

2015年04月01日 WEB制作系 コード・プラグイン jQuery