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中做到这一点，但是我怎么能够以编程方式确定远程文件没有加载，在这种情况下，使用回退图像进行响应？

更新

我喜欢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>

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

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

Answer 2

我发现问题是图像请求有时会挂起很长一段时间。如果你想在发生这种情况时向用户展示一些内容，你可以在img元素上设置一个带有“not available”图标等的CSS背景。然后，如果图像最终加载，它仍然会显示。

setTimeout(function(){
    $(".thumb").each(function(){
        if(!this.complete){
            $(this).css({background:'url("not-available.gif")'});
        }
    });
}, 5000);

Answer 3

我找到了一个CSS解决方案：重叠图像。

在我的情况下，我有两张个人资料图片，一张图片是用户，如果它存在，如果它不存在，那么将使用一个头像。我们不知道用户图像是否存在。

因此，如果目标图像不存在，则化身会显示：）

// CSS

.avatar {
    position:relative;
    height: 40px;
    width: 40px;
}

.avatar img {
    position: absolute;
    top: 0px;
}

// HTML

<div class="avatar">
    <img height="40" width="40" src="/assets/users/avatar.jpg">
    <img height="40" width="40" src="/assets/users/joe.jpg" >
</div>

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

更新

3 个答案: