7

我有这样的锚标签：

<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但如何以编程方式确定图像失败？

4

3 回答 3

16 
<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()。

于 2013-08-23T16:03:08.893 回答
1

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

setTimeout(function(){
    $(".thumb").each(function(){
        if(!this.complete){
            $(this).css({background:'url("not-available.gif")'});
        }
    });
}, 5000);
于 2013-08-23T16:28:40.370 回答
1

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

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

所以如果预期的图像不存在，头像就会出现:)

//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>
于 2018-01-21T23:02:48.957 回答