Question

I have a tabbed menu.

<ul>
    <a href="views/wrap1.php"><li class="wrap1"> Home &nbsp&nbsp </li></a>&nbsp
    <a href="views/wrap2.php"><li class="wrap2"> Packages</li></a>&nbsp
    <a href="views/wrap3.php"><li class="wrap3"> Clients &nbsp </li></a>&nbsp
    <a href="views/wrap4.php"><li class="wrap4"> Creations</li></a>&nbsp
    <a href="views/wrap5.php"><li class="wrap5"> Reach Us &nbsp </li></a>&nbsp
</ul>

And using Jquery.load() i load five pages wrap1.php , wrap2.php , wrap3.php , wrap4.php , wrap5.php
into a common div container

The Jquery code i am using is

$('.wrap1').css({'border':'2px solid black'}) ;
     $('#tabs li').click(function(){


     $('#container').load('views/'+$(this).attr("class")+'.php', function(){

     $('#container').fadeIn('slow') ;
        });
        return false;
    });

Everything is working fine but i want to display a loading gif when the page loads up and hide that gif when the page has loaded. I read many questions here and tried each and everything but nothing worked for me. Also do tell me that where should i put a script so that it may work

Answer 1

You can go through jQuery for this. jQuery provides you lots of animation event or functions.

Click here jQuery Image Loader for see some nice example that you can use in your code.