Showing a loading image on page refresh

Question

I have a javascript snippet that forces a page reload using .reload(true) once someone clicks on a particular link. How can I show a simple "loading" image while the page refresh is taking place?

(Already using jquery on the page if that helps)

Answer 1

You didn't specify where you wanted the loading image. If you want the images themselves to "become" a loading image, start by decorating your images as so:

<img class="cl"
     src="loading.gif"
     onload="if(!this._done){this._done=true;this.src='real.jpg';}"/>

Then, before calling .reload, do:

$('img.cl').attr('src','loading.gif');

On the other hand, if you want to put it in a fixed place, simply do so, but mark that div as hidden, as in:

<div id="rl">loading <img src="loading.gif"/></div>
<noscript><style>
#rl {display:none;}
</style></noscript>
<script><!--
document.write("<style>\ndiv#rl {display:block;}\n</style>");
$('#rl').hide();
//--></script>

(maybe you'll also position rl someplace)

Then, before calling reload, simply re-show it:

$('#rl').show();

Answer 2

Check out jquery-loadmask plugin