JavaScript：如何在不附加查询字符串的情况下重试加载图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23160107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: how to retry loading an image without appending query string?
提问by Paolo
A webpage contains few images, 5-10, average size.
一个网页包含的图片很少，5-10 张，平均大小。
Sometimes, randomly, the loading of an image fails and it is not displayed.
有时，随机地，图像加载失败并且不显示。
Let say that every 100 images loaded 1 fails.
假设每 100 张图片加载 1 张失败。
That may happen because the server is busy or there is a temporary network problem, any reason..
这可能是因为服务器繁忙或出现临时网络问题，任何原因..
I know for sure that the request to obtain the image is valid so if I retry to load the image I have very good chances to get it.
我确信获取图像的请求是有效的，因此如果我重试加载图像，我很有可能获得它。
I have code to detect when an image fails to load and trigger a callback.
我有代码来检测图像何时无法加载并触发回调。
But then, how can I tell the browser "retry loading that image"?
但是，我如何告诉浏览器“重试加载该图像”？
Can I just remove the image from the DOM and put it back again?
我可以从 DOM 中删除图像然后再放回去吗？
If I append to the URL a random query string the image will be reloaded for sure but I'd prefer to avoidthat because the image won't be properly cached.
如果我向 URL 附加一个随机查询字符串，图像肯定会被重新加载，但我更愿意避免这种情况，因为图像不会被正确缓存。
I'm using jQuery, so a jQuery solution is good for me as pure JavaScript.
我正在使用 jQuery，因此 jQuery 解决方案对我来说就像纯 JavaScript 一样。
回答by samanime
What you can do is just try to load the image in a new Imageobject. If an image loads, it will update all other places as well (similar to how if you embed the same image 50 times, once it loads once, they all show). So, in your callback (which I assume is an error callback), just try:
您可以做的只是尝试将图像加载到新Image对象中。如果图像加载，它也会更新所有其他位置（类似于如果您将同一图像嵌入 50 次，一旦加载一次，它们都会显示）。因此，在您的回调中（我认为这是一个错误回调），请尝试：
var img = new Image();
img.src = this.src; // this should refer to the original failed image
That'll trigger the loading of that same URL in the new image object. If it works, both will be updated and the one we just created is simply never shown anywhere.
这将触发在新图像对象中加载相同的 URL。如果它有效，两者都将被更新，我们刚刚创建的那个根本不会在任何地方显示。
回答by pgcan
Inspired by samanime's suggestion, I came up with below lines of code. I call this code in jquery's document-ready event. See if it helps someone, also let me know if it requires improvements,
受到 samanime 建议的启发，我想出了以下几行代码。我在 jquery 的文档就绪事件中调用此代码。看看它是否对某人有帮助，如果需要改进，也请告诉我，
if (document.images) {
var imageArray = new Array(document.images.length);
var i = 0;
for (i = 0; i < document.images.length; i++) {
$(document.images[i]).attr('dt-retry', 3);
imageArray[i] = new Image();
imageArray[i].src = document.images[i].src;
//try to reload image in case of error
//retry for 3 times
var imgErrorFunction = function () {
try {
var img = this;
var isRet = true;
var r = 3;
if (img.hasAttribute('dt-retry')) {
r = parseInt(img.getAttribute('dt-retry'));
r = r - 1;
img.setAttribute('dt-retry', r);
if (r <= 0) {
isRet = false;
}
}
if (isRet) {
var temp = new Image();
temp.setAttribute('dt-retry', r);
temp.onerror = imgErrorFunction;
temp.src = img.src;
}
} catch (e) {
}
}
document.images[i].onerror = imgErrorFunction;
}
}