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

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

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に当たる要素の先祖を辿って行くことが出来ます、クラス名を引数として渡すことでそのクラスを持っている親要素にアクションを起こせます。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)