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加载默认图像，如果其他失败

回答

相关问题