如果资源不可访问，则为辅助来源

Question

问题是这样的：我正在处理的项目中有一个小型板载服务器，运行速度有点慢，所以我想将包含的小型网站的图像移动到外部资源，如外部网络服务器；

问题是，我不确定当我访问 Internet 时是否始终连接到 Internet，也许我只会在 LAN 中。

所以我的问题是：如何为网页上的图像指定主要（外部）和次要/备份（本地）来源？所以如果用户连接到互联网，这会减轻小服务器的负载吗？

提前谢谢各位！

编辑：我在这里找到了答案： jQuery/JavaScript to replace broken images

-这是错误，带有直接重新分配图像的内联javascript函数！ （很棒的东西）

干杯，来自互联网的好人，他们帮助有需要的人！ ^^

Answer 1

你有加载失败时可以调用的onerror：

<img onerror="runSomeScriptThatReplacesThisImage()" ...

或：

<img onerror="this.src='yourOtherImage.jpg" ...

请小心，因为如果onerror 也失败了，你会得到一个循环。所以一定要避免这种情况。

Answer 2

您的图像目录将有两个 URL，例如

1. //www.remote.com/images/
2. ~/图片/

当会话开始时，您可以向远程服务器发出请求，如果请求超时或者您没有收到 200 响应，您可以使用本地 URL 库。我建议将其存储在会话变量中以便于访问。

Answer 3

这可以在不使用任何 JavaScript 的情况下完成。

object element 可用于显示图像。如果引用的图像（在data 属性中）无法加载，则将使用object 的后备内容。现在，如果您包含另一个object，将尝试这个。最后一个应该包括替代的后备内容，例如描述图像的文本（类似于img 上的alt 属性）。

<object type="image/png" data="http://foo.example.com/external-image.png">
  <object type="image/png" data="/local-image.png">
    <!-- alternative text for the image (if even the local one cannot be loaded; for accessibility; etc.) -->
  </object>
</object>

Answer 4

我认为您最好的选择是使用 AJAX 检索图像。

然后，如果快速服务器出现故障，您可以回退到从慢速服务器检索它们。