当首选(外部/服务器/远程/云)映像无法加载时,有没有办法提供回退(本地)映像？

Question

我有这样的锚标签:

<a href=\"http://www.duckbill.com" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.duckbill.com/PlatypiOnVacation.jpg\" alt=\"Platypi playing Pinochle and eating Pizza in Panama\" /></a>

...有时无法加载src图像; 在这种情况下,我想在经过足够的延迟(几秒钟)后,将其替换为:

<a href=\"http://www.duckbill.com" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"Content/Images/PlatypiOnVacation.jpg\" alt=\"Platypi playing Pinochle and eating Pizza in Panama\" /></a>

我知道我可以在jQuery中做到这一点,但是我怎么能够以编程方式确定远程文件没有加载,在这种情况下,使用回退图像进行响应？

UPDATE

我喜欢Brad Christie对真正不可用的图像的回答,但我想永远不要显示"不可用" - 如果目前还没有远程的那个,只需使用本地的.我喜欢这个:http://www.cirkuit.net/projects/jquery/onImagesLoad/example1.html但是如何以编程方式确定图像失败？

Answer 1

<img src="http://remotecdn.com/myimage.jpg"
     data-failover="/assets/notfound.jpg" />

然后:

<script>
  $('img[data-failover]').error(function(){
    var failover = $(this).data('failover');
    if (this.src != failover){
      this.src = failover;
    }
  });
</script>

尝试加载实际源,但如果发生错误,请使用failoverdata属性将其转换为本地资源.由于我们将补充信息分开,因此在不能/不支持它的浏览器中应该优雅地失败.

有关的更多信息.error().