JavaScript:如何在不附加查询字符串的情况下重试加载图像？

Question

一个网页包含少量图片，平均大小为 5-10 张。

有时，随机地，图像加载失败并且不显示。

假设每 100 张图像加载 1 次失败。

这可能是因为服务器繁忙或存在临时网络问题，任何原因..

我确信获取图像的请求是有效的，所以如果我重新尝试加载图像，我很有可能获得它。

我有代码来检测图像何时无法加载并触发回调。

但是，我该如何告诉浏览器“重试加载该图像”？

我可以只从 DOM 中删除图像然后再放回去吗？

如果我向 URL 附加一个随机查询字符串，图像肯定会重新加载，但我宁愿避免，因为图像不会被正确缓存。

我正在使用 jQuery，因此 jQuery 解决方案作为纯 JavaScript 对我来说非常适合。

Answer 1

您可以做的只是尝试将图像加载到新的 Image 对象中。如果图像加载，它也会更新所有其他位置(类似于如果您嵌入相同的图像 50 次，一旦加载一次，它们就会全部显示)。所以，在你的回调中(我认为这是一个错误回调)，只需尝试:

var img = new Image();
img.src = this.src; // this should refer to the original failed image

这将触发在新图像对象中加载相同的 URL。如果有效，两者都会更新，而我们刚刚创建的那个根本不会在任何地方显示。