title: jquery ajax loading gif
body: <p>How do I add a loading gif during the jQuery AJAX processing? I read some tutorials, they use <code>beforeSend</code>. but still not see the loading thing. </p>
  
  <pre><code>&lt;script src="jquery-1.6.1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $.ajax({
  url: "index_2.php", 
  dataType: "html",
  type: 'POST', 
  data: "value=something",
  beforeSend: function () {
      $("#result").html('&lt;img src="loding.gif" /&gt; Now loding...');
  },
  success: function(data){ 
    $("#result").html(data); //even add .delay(5000)
  }
  });
  &lt;/script&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>index_2.php</p>
  
  <pre><code>&lt;?php
  sleep(5);
  echo $_POST['value'];
  ?&gt; 
  </code></pre>
  
  <p>I set <code>sleep(5);</code> in <code>index_2.php</code>, it should show the <code>londing.gif</code> in the <code>div#result</code> for 5 seconds, until the data return from <code>index_2.php</code>.</p>