How To Add Animated Loading GIF For This jQuery?
<p>I have this following code on my site :</p>

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

<p>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. </p>

<p>how to do that?</p>

<p>UPDATE :</p>

<p>here's more code associates with that jQuery script :</p>

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

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

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