Adding the loading gif to my application

[mostwanted]

Hi guys can someone please help me with a clear definition of how I can add a loading gif to my application, one which will be displayed while the user is waiting for a page to open after clicking a link. Most of the discussions on this topic are not clear on how this can be achieved.

Regards

Mostwanted

[Dave S]

If javascript is enabled (and usually is for web2py pages), the easiest way is to load the gif when you load the referencing page (that is, the page with the link to be clicked).  Load it with attribute visibility set to hidden.  Use the js to detect the link click, and set the attribute to visible.

If you're doing a LOAD() within the referencing frame, then the DIV where the LOAD() occurs can include

<span class="fa fa-spinner fa-spi"></span>

I haven't done this for a while, so a good refresher for me.

/dps

[mostwanted]

 The problem is when i click a link to go to other pages the links only works at loading the gif, they dont re-direct to relevant requested pages!

What am i doing wrong? How can I fix it?

loading.load

<img src="{{=URL('static', 'images/loading.gif')}}" />

LOADING SCRIPT

<style>
    #loading
    {
        visibility: hidden;
    }
</style>
<script>
    $(document).ready(function()
                      {
        $('a').click(function(e)
                     {
        $('#loading').css('visibility', 'visible');
                        e.preventDefault();
        });
    });
</script>
<div id="loading">
   {{=LOAD('default','loading.load',ajax=True)}}
</div>