JavaScript: how to retry loading an image without appending query string?
A webpage contains few images, 5-10, average size.
Sometimes, randomly, the loading of an image fails and it is not displayed.
Let say that every 100 images loaded 1 fails.
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?
If I append to the URL a random query string the image will be reloaded for sure but I'd prefer to avoid that because the image won't be properly cached.
I'm using jQuery, so a jQuery solution is good for me as pure JavaScript.
Answer
What you can do is just try to load the image in a new Image object. 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:
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.