How to detect image load failure and if fail, attempt reload until success?
<img onerror="dosomthing()" ...>
After mixing together a few ideas from other answers, along with my own, I came up with something that worked for me:
Add this to your img elements:
onerror="tryAgain(this)"
Script:
<script>
function tryAgain(e)
{
setTimeout(reloadImg, 1000, e);
}
function reloadImg(e)
{
var source = e.src;
e.src = source;
}
</script>
You can of course change the timeout to whatever you want. (forgive me for not using $ in my answer; I'm new to JS and haven't used JQuery at all).
Here something I compiled which might help. I couldn't manage to do testing of this please let me know if you are having any issues.
$(function() {
var $images = $('img.imageClassUpdateAtInterval:not([src="/assets/spinner.gif"])');
// Now, no such image with
// a spinner
if($images.length === 0 && window.imageLocator)
clearInterval(window.imageLocator);
window.imageLocator = setInterval(function() {
$images.each(function() {
$this = $(this);
if (!$this.data('src')) {
$this.data('src', $this.prop('src'));
}
$this.prop('src', $this.data('src') + '?timestamp=' + new Date().getTime());
console.log($this.prop('src'));
});
}, 60 * 1000);
// suppose, an error occured during
// locating the src (source) of the
// image - image not found, network
// unable to locate the resource etc.
// it will fall in each time on error
// occurred
$('img.imageClassUpdateAtInterval').error(
function () {
// set a broken image
$(this).unbind("error").attr("src", "/assets/broken.gif");
// setting this up in relative
// position
$(this).css("position", "relative");
$(this).apppend("<span>Error occured</span>");
$(this).find("span").css({"position": "absolute", "background-color": "#252525", "padding": ".3em", "bottom": "0"});
});
});
The above solution is compiled from two different solutions commenced by @user113716 and @travis
take a look at this code:
$('img.autoFix').error(function(){
var src = this.src;
this.src = src.substr(0, src.indexOf('?')) + '?t=' + new Date().getTime()
});