Question

I have this following code on my site :

<script type="text/javascript">
  $(document).ready(function(){
      $('.notif-email > a').click(function(e) {
            $("#email-notif").load("notif-email.php");
      });
      $('.notif-message > a').click(function(e) {
            $("#message-notif").load("notif-message.php");
      });
      $('.notif-prospect > a').click(function(e) {
            $("#prospect-notif").load("notif-prospect.php");
      });
  });
</script>

and I want to add some loading effect with GIF animated file, let’s say… loading.gif and I want to show it to user after they ‘Click’ something but still waiting for load() file to be executed on the server.

how to do that?

UPDATE :

here’s more code associates with that jQuery script :

<li class="notif-email"><a href="#" title="17 new emails">View New Emails</a>
<div class="popup-notif">
<div class="notif-top">
<div class="notif-title">Notifications</div>
</div><!-- .notif-top -->
<div class="notif-body">
<div id="email-notif" class="notif-child-wrap">
</div><!-- .notif-child-wrap -->
</div><!-- .notif-body -->
</div><!-- .popup-notif -->
</li>

<li class="notif-message"><a href="#" title="5 new messages">View New Messages</a>
<div class="popup-notif">
<div class="notif-top">
<div class="notif-title">Messages</div>
</div><!-- .notif-top -->
<div class="notif-body">
<div id="message-notif" class="notif-child-wrap">    
</div><!-- .notif-child-wrap -->
</div><!-- .notif-body -->
</div><!-- .popup-notif -->
</li>

<li class="notif-prospect"><a href="#" title="1,999 new prospects">View New Prospects</a>
<div class="popup-notif">
<div class="notif-top">
<div class="notif-title">New Prospects</div>
</div><!-- .notif-top -->
<div class="notif-body">
<div id="prospect-notif" class="notif-child-wrap">    
</div><!-- .notif-child-wrap -->
</div><!-- .notif-body -->
</div><!-- .popup-notif -->
</li>

Answer 1

function togglemask(show) {
  if(show)
   $('#target').append('<img class="loadergif" src="loading.gif" width="" height="">');
  else
   $('#target').remove('img.loadergif');
}

$(document).ready(function(){
      $('.notif-email > a').click(function(e) {
            togglemask(true);
            $("#email-notif").load("notif-email.php", togglemask(false));
      });
      $('.notif-message > a').click(function(e) {
            togglemask(true);
            $("#message-notif").load("notif-message.php", togglemask(false));
      });
      $('.notif-prospect > a').click(function(e) {
            togglemask(true);
            $("#prospect-notif").load("notif-prospect.php", togglemask(false));
      });
  });

Note

Here #target is just for example. you can use any element to add that.