Loading image sometimes doesn't appear

StackOverflow https://stackoverflow.com/questions/16682996

  •  30-05-2022
  •  | 
  •  

Question

In my system I have a php file that process transaction and then submit a form via post. And some times it takes about 10 seconds. So I put a loading gif (less than 100k size) on that, to be showed while user waits for it to complete. The problem is that sometimes the transactions are completed so fast that the image has no time to appears. And when the gif does not load it shows the image space as broked link, so it looks like an error.

HTML:

<div class="content_animated">
<img src="../images/ra_loading.gif" alt="Aguarde..processando seu pagamento..." title="Aguarde..processando seu pagamento..." />
</div>

CSS:

.content_animated{
    position:absolute;
    width:436px;
    height:38px;
    top:50%;
    left:50%;
    margin-left:-218px;
    margin-top:-16px;
}

Is it possible to force it to load or set a delay to give time for the gif to load? I'm a newbie in programming, so could someone please help me on it?

Was it helpful?

Solution

You can see the way I have preloaded the image with javascript

<html>
   <head>
      <script language = "JavaScript">
         function preloader() 
         {
         loadingImage = new Image(); 
         loadingImage.src = "../images/ra_loading.gif";
         }
      </script>
   </head>
   <body onLoad="javascript:preloader()">
      <!--call for Javascript to preload the image-->
      <img src="../images/ra_loading.gif" alt="Aguarde..processando seu pagamento..."    title="Aguarde..processando seu pagamento..." />
   </body>
</html>

OTHER TIPS

You can add one onload listener in the image tag, which will be invoke when the image is loaded. So you can change the visbility of the tag, something like:

<img id="a" onload="this.style.display='block'" style="diplay:none" src="yourimage.gif"/>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top