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

我有这样的锚标签：

<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对真正不可用图像的回答，但我不想显示“不可用”的图像——如果远程图像目前不可用，就使用本地图像。我喜欢这样：但如何通过编程确定映像失败？

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

然后：

$（'img[data failover]'）。错误（函数（）{
var failover=$（this）.data（'failover'）；
if（this.src！=故障转移）{
this.src=故障转移；
}
});

尝试加载实际源，但如果发生错误，请使用

故障转移

数据属性将其转换为本地资源。由于我们将补充信息分开，因此在不支持/不支持它的浏览器中，它应该会正常地失败

---

更多信息。

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

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

---

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

在我的例子中，我有两个配置文件图像，一个是用户的图像，如果它存在，如果它不存在，那么将使用一个化身。我们不知道用户映像是否存在

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

//CSS

//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>

如果它是一个本地映像（这就是您的问题中使用的映像），您可以使用您的Web服务器来执行此操作。-->，ETC如果本地映像文件未加载，会发生什么情况？对，你会遇到一个无限循环。有一天，某个讨厌的人或软件删除了该文件。因此，您应该清除

onerror

处理程序，例如使用

this.onerror=function（）{}“

，然后再分配给

this.src

。问题是，当远程映像最终加载时，如果它有一些透明区域，回退映像将被看穿。此映像的唯一问题是，即使您不需要加载，也总是同时加载这两个映像。这不是一件可怕的事情，但值得一看。

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

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

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