jQuery他に失敗した場合のデフォルト画像の読み込み

Question

私は尋ねてきましたが、回答が得られていないようです。

別のイメージが失敗した場合、 "/images2/no-avatar.png"になるデフォルトイメージを読み込みたいとします。 img idは「アバター」になります。

最新のバージョンのjQueryを使用しているため、問題になることはありません。

画像は、次のようになります：

<img src="http://www.website.com/the-image.jpg" height="100" width="100" id="avatar" /> 

を、それは、ノーの答えとしばらくの間、これを見つけようとしてきたこの

<img src="/images2/no-avatar.png" height="100" width="100" id="avatar" /> 

ようになり失敗した場合、もしそうなら、あなた高度なアドバイスありがとうございました。

Answer 1

私はちょうどCSSだけの方法を使用しており、うまくいきます。私のアバターは固定サイズでDIVに常駐しているので、そのdivの背景をデフォルトの画像に設定するだけです。 imgがオーバーレイするとオーバーレイされます。しかし、失敗した画像がその[X]プレースホルダーを持つので、一番上に座っていることは望ましくありません。私はAjax呼び出しを使用し、失敗した場合はイメージのsrcをデフォルトに設定するか、クラスをno-avatarに設定し、CSSで背景イメージとサイズを制御します。

http://api.jquery.com/jQuery.ajax/

Answer 2

あなたは、HTMLとCSSでこれを行うことができます。

<style> 
    .img { 
     width:100px; 
     height:100px; 
    } 
    .img.placeholder { 
     background-image:url('placeholder.jpg'); 
    } 
</style> 

<div class="placeholder img"> 
    <div class="img" style="background-image:url('image.jpg')"></div> 
</div> 

壊れた画像は背景だから表示されません。

Answer 3

あなたのために役立つかもしれないものがあります。

jQuery(document).ready(function(){ 
    jQuery.fn.LoadImage = function(options) { 
     var settings = jQuery.extend({ 
      'defaultImage'   : '/image/notfound.png', 
      'ImageToLoad'   : null 
     }, options); 

     return this.each(function() { 
      var jthis = jQuery(this); 
      if(settings.ImageToLoad == null) settings.ImageToLoad = jthis.attr("src"); 
      var img = new Image(); 
      jQuery(img) 
      .load(function() { 
       jthis.attr("src", settings.ImageToLoad); 
      }) 
      .error(function() { 
       jthis.attr("src", settings.defaultImage); 
      }) 
      .attr('src', settings.ImageToLoad); 
     }); 
    }; 
}); 

次にあなたが

//Find all img src and show default if not found 
jQuery("img").LoadDefault(); 

//Find all a certain ID and load a centain Image or default 
jQuery("#imgObj").LoadDefault({defaultImage:"default.jpeg", ImageToLoad:"image.jpeg"}); 

や疑問を解決

jQuery("#avatar").LoadDefault({defaultImage: "/images2/no-avatar.png" }); 

Answer 4

このすべき作品。..このようにそれを実装することができます

<script> 
      $('img').error(function() { 
      $(this).attr('src', 'http://www.huntingdonarea.info/images/loading.gif'); 
      }); 
    </script> 

はそれが役に立てば幸い君は。