如果资源不可访问，则为二级源

Question

这是交易：我正在处理的项目上有一个小型板载服务器，运行速度慢，所以我认为将包含的小网站的图像移动到外部源，如外部Web服务器;

问题是，当我访问它时，我不确定我是否会一直连接到互联网，也许我只会在局域网中。

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

先谢谢你，伙计们！

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

-it是onerror，内置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，则会尝试使用此alt。最后一个应包括替代后备内容，例如描述图像的文字（类似于img上的<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> 属性）。

{{1}}

Answer 4

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

然后，您可以回退以从快速服务器失败的慢速服务器中检索它们。