jQuery加載默認圖像，如果其他失敗

我想加載一個默認圖像，如果其他圖像失敗，它將會是「/images2/no-avatar.png」。 img id將是「avatar」。

我有最新版本的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" />

我一直試圖找到這對於沒有答案了一段時間，因此，如果您幫助先進的感謝。

來源

2012-03-11 Dare Ham

你以前問過，但什麼構成「失敗」，是空的？你能檢查服務器上存在的文件嗎？ – charlietfl 2012-03-11 19:53:26

我使用的只是CSS的方法，它工作正常。由於我的頭像是固定大小，並駐留在DIV中，我只是將該div的背景設置爲默認圖片。當img加載它覆蓋。但是，您不希望失敗的圖像位於頂部，因爲它將具有該[X]佔位符。我會使用Ajax調用，如果失敗，我會將圖像的src設置爲默認值，或者將類設置爲no-avatar，並使用CSS控制背景圖像和尺寸。

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

來源

2012-03-11 19:54:42

您可以用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>

破碎的圖像不會顯示，因爲它是背景。

來源

2012-03-11 20:07:42 demux

用jQuery來做它會容易得多。但是，謝謝。 – 2012-03-11 20:28:43

對於完整的css解決方案+1，雖然在這裏沒有用。 – gopi1410 2012-06-15 05:31:22

這裏有些東西可能適合你。

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" });

來源

2012-06-15 05:27:20 Glenn

這應該工作：

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

希望它可以幫助您。

來源

2014-03-03 14:10:49 user3236290

jQuery加載默認圖像，如果其他失敗

回答

相關問題