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

Pao*_*olo 2 javascript jquery image onerror

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

有时,图像的加载会随机失败,并且不会显示。

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

可能由于服务器繁忙或任何临时网络问题而发生。

我肯定知道获取图像的请求是有效的,因此,如果我尝试加载图像,则很有可能获得它。

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

但是,然后如何告诉浏览器“重试加载该图像”

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

如果我在URL后面附加一个随机查询字符串,则可以肯定会重新加载图像,但是我宁愿避免这种情况,因为图像不会被正确地缓存。

我使用的是jQuery,因此jQuery解决方案对我来说很适合纯JavaScript。

sam*_*ime 5

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

var img = new Image();
img.src = this.src; // this should refer to the original failed image
Run Code Online (Sandbox Code Playgroud)

这将触发在新的图像对象中加载相同的URL。如果可行,那么两者都将被更新,而我们刚刚创建的对象将永远不会显示在任何地方。