title: How to show loading gif when request goes Ajax
body: <p>I am trying to show loading gif image while ajax post request sends. Actually my code is capturing image via canvas and this image renders and goes to php page for saving. This php file saves and returns the image. Now I need show the loading image while request post and hide the loading image while ajax request finishes. Anyone have idea how I can do this?</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function capture() {
      $('.showcase').html2canvas({
          onrendered: function (canvas) {
              //Set hidden field's value to image data (base-64 string)
              $('#img_val').val(canvas.toDataURL("image/png"));
              //Show loading image
              $("#preview-loading").html('&lt;img src="editor/loader.gif" alt="Uploading...."/&gt;');
              //Submit the form with ajax function
              $("#myForm").ajaxForm({
                  target: '#preview-des'
              }).submit();
          }
      });
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="preview-loading"&gt;&lt;/div&gt;
  &lt;div  id="preview-des"&gt;&lt;/div&gt;
  &lt;form method="post" action="editor/save.php" enctype="multipart/form-data" id="myForm"&gt;
      &lt;input type="hidden" name="img_val" id="img_val" value="" /&gt;
  &lt;/form&gt;
  </code></pre>