How To Detect Image Load Failure And If Fail, Attempt Reload Until Success?

January 30, 2024 Post a Comment

I have some images loading from offsite and have no control over their availability. I've found that under heavy load they are sometimes failing to load, but on a quick refresh th

Solution 1:

<imgonerror="dosomthing()"...>

Solution 2:

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 spinnerif($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=' + newDate().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

Solution 3:

take a look at this code:

$('img.autoFix').error(function(){
    var src = this.src;
    this.src = src.substr(0, src.indexOf('?')) + '?t=' + newDate().getTime()
});

Solution 4:

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>functiontryAgain(e) 
  {
    setTimeout(reloadImg, 1000, e);
  }

  functionreloadImg(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).

Solution 5:

This a very simple approach that handles all images on the page.

https://github.com/doomhz/jQuery-Image-Reloader

jQuery Image Reloader

Forces the browser to retry loading the broken images. A decent solution for images stored in a cloud (i.e Amazon S3).

Why and when to use it?

This plugin is effective when you load images from a cloud (i.e. Amazon S3) and the CDN has a delay until the image is accessible. The browser will display a broken image icon instead and won't retry to reload it. jQuery Image Reloader will take care of that.

Plugin code

The only code you need to activate the plugin is this:

$(".slow-images").imageReloader();

Html5 Learning