【jQuery】画像読込み失敗時に画像を非表示にする・代替画像を表示する・IEで消えない対策

リンク切れなどで画像読込み失敗時に、jQueryで
・画像を非表示にする
・代替画像を表示する
・IEで反映されず非表示にならない対策
をする方法を解説します。

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

画像読込みに失敗した画像を消すjQuery

JavaScript

$("#icon").error(function(){
  $("#icon").hide();
});

.error()でブラウザが出したエラーでイベントを発生させます。
その後、エラーが出た画像を隠すという処理をすれば、リンク切れなどで読込みに失敗した画像を、非表示にすることができます。

画像読込みに失敗した画像を代替画像を表示するjQuery

JavaScript

$("#icon").error(function(){
  $("#icon").attr('src', 'notload.png');
});

上のサンプルと同じで、.error()でブラウザが出したエラーでイベントを発生させます。
その後、エラーが出た画像のsrcを読込みに失敗したとき専用の画像に差し替えます。

IE対策で読込みに失敗した画像を消すJavaScript

JavaScript

window.onload = function load() {
  var userAgent = window.navigator.userAgent.toLowerCase();
  if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident") > -1) {
    var img = document.getElementById('icon2');
    if(img.complete == false ){
      img.style.display='none';
    }
  }
};

IEの場合、リンク切れを起こしていてもエラーを出さなかったりすることもあるらしいのでそれの対策をjavascriptで書きます。IEだけに効くようにユーザーエージェントで振り分けてます。.complete == falseでエラーが出た場合これで対処できます。