show a spinner image while page inside div is loading and hide spinner image while the page completely loaded inside div

Question

I have this Menu list

<ul class="nav navbar-nav" style="width:80px;">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle">Profile</a>
         <ul class="dropdown-menu">
            <li id="profile"><a href="#">My Profile</a></li>
            <li id="drive"><a href="#">My Drive</a></li>
          </ul>
    </li>
</ul>

which i call profile.php and drive.php with this:

$(document).ready(function(){
    $("#profile").click(function(){
        $("#box").load("/functions/profile.php");
    });    
    $("#drive").click(function(){
        $("#box").load("/functions/drive.php");
    }); 
});

into this <div id="box"></div> and it works great :).

But there is a problem because profile.php page has a large image and takes time to load. Therefore, i want to show a laoding.gif image into <div id="box"></div> while profile.php page loading in it, and when profile.php loaded completed then the loading.gif image should be hidden and the profile.php page should be visible in <div id="box"></div> .

Thanks in advance.

I am a student, so it is a bit difficult for me to solve it.

PS I search google a lot but none worked.

Answer 1

You can try something like this:

$("#box").html("<img src='laoding.gif' />").load("/functions/profile.php");

This will change the html from the #box element until the load function finishes and replaces again the content.

Working example.