How can I show a loading image during AJAX request?
<p>I am loading another page in to a <code>div</code> with the help of this jQuery code:      </p>

<pre><code>$('#maildiv').load('reports/mail_report.php');
</code></pre>

<p>The load is taking some time. Meanwhile I want to show a loading image. When the file message is loaded the loading image should be hidden. </p>

<p>How can I do this?</p>

<p>I tried with:</p>

<pre><code>function mail() {
    $("#mailimg").show();
    $('#maildiv').load('reports/mail_report.php') {
        $("#mailimg").fadeOut("10000");
        $('#maildiv').fadeOut("10000");
    }
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;input type="button" class='button green' value="Mail Report" name="" id=""  Onclick='mail();return false;'/&gt;
&lt;img id="mailimg" style='display:none;' src='img/loading.gif' width='20' height='20'&gt;     
&lt;div id="maildiv" style="color:red;"&gt; &lt;/div&gt;
</code></pre>
