Loading image sometimes doesn't appear

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?

Are you suggesting you *want* your users to wait for the image that indicates they are waiting, even if they don't have to wait? — Patrick Moore, May 22 '13 at 03:28
Lol. Sorry. I forgot to say that when the ra_loading.gif does not load it shows the image space as broked link, so it looks like an error. — Marcelo Srougi, May 22 '13 at 03:34

score 0 · Accepted Answer · answered May 22 '13 at 03:42

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>

score 0 · Answer 2 · answered May 22 '13 at 03:46

0

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"/>

answered May 22 '13 at 03:46

fmodos

4,472
1
16
17

Loading image sometimes doesn't appear

2 Answers2