4

I have the following mechanism in place which keeps trying to load an image with a delay between retries for a maximum of 10 attempts.

<img onerror ="imgError(this);" />

<script type='text/javascript'>
  function imgError(image) {
    if (!image.hasOwnProperty('retryCount')){
      image.retryCount = 0;
    }

    if (image.retryCount < 10){
      setTimeout(function (){
          image.src += '?' + +new Date;
          image.retryCount += 1;
      }, 1000);
    }
  }
</script>

This works great, the only problem is that the first time the image fails to load an error icon is displayed. This is really ugly as you can see in the following screenshot.

enter image description here

A few seconds later, when the image pops into existence (generated as a thumbnail from a larger image using AWS lambda), it is loaded and displayed successfully.

My question is how can I avoid the ugly intermediate broken image icon from displaying? I would prefer for either nothing to display or some text saying "generating thumbnail...".

8
  • 5
    Why do you have to repeatedly try to load an image before it works? If you are waiting for the server to do something is it possible to make an ajax call that will return when the image has been generated and then simply insert the image into the DOM? Constantly hitting a server until "it works" makes me feel like something wasn't designed correctly. Nov 19, 2015 at 15:15
  • There is no screen shot (I don't see what you posted).. and if you are getting error, then you should handle that in try catch block.
    – tanjir
    Nov 19, 2015 at 15:16
  • 1
    @tanjir the screenshot is there. It's literally just a screenshot of a broken image. Nov 19, 2015 at 15:19
  • makes sense... :).. ha ha.. but this is not useful. Useful information would be the error message/console output.
    – tanjir
    Nov 19, 2015 at 15:20
  • 2
    start hidden, on the load event, remove the bit hiding it, but really if the server unstable, fix the server first
    – Paul S.
    Nov 19, 2015 at 15:22

2 Answers 2

1

You may want to put a temporary placeholder image as the original source, attempt to load the actual image in the background and inject it if/when it becomes available.

The following code also includes a global timeout so that server and network delays are taken into account.

<html>
<script type='text/javascript'>
  function loadImage(id, src) {
    var ts = Date.now(), img = new Image;

    img.onerror = function() {
      if(Date.now() - ts < 10000) {
        setTimeout(function() { img.src = src; }, 1000);
      }
    }
    img.onload = function() {
      document.getElementById(id).src = src;
    }
    img.src = src;
  }
</script>

<img id="myImage" src="placeholder.png" />
<script>loadImage("myImage", "whatever.png");</script>
</html>

But you still get a 404 error that is displayed in the console for each failed attempt. So, you really should consider a server side fix if possible -- as already suggested.

1
  • IMO I feel there is no need for setTimeout since there is natural delay when checking for files and it won't recheck until it has resolve the previous call. It will only most likely be quick if no network at all and that is fine. Feb 9, 2022 at 4:50
0

you can use opacity in style like this

function showme(elem)
{
$(elem).css("opacity",1)
}
function imgError(image) {
    if (!image.hasOwnProperty('retryCount')){
      image.retryCount = 0;
    }

    if (image.retryCount < 10){
      setTimeout(function (){
          image.src += '?' + +new Date;
          image.retryCount += 1;
      }, 1000);
    }
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img style="opacity:0" onload="showme(this)" onerror ="imgError(this);" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRIqW6zLho0lKtLBP3J5izulhQhTsKyl2L-a1LC9vtidlQRK3ogQQ" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.