title: Display Loading image in Ajax loading page
body: <p>I've a button that when we click on it, database will be updated and then result will show on page, based on <strong>upload.php</strong> (( this section is working well, I have no problem with this.))</p>
  
  <pre><code>&lt;BB id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal" style="text-decoration:none"&gt;
  
  &lt;kk&gt;&lt;!--show updated columns information here--&gt;&lt;/kk&gt;
  
  $(document).ready(function() {
  $("BB").click(function() {
      var Id = jQuery(this).attr("id");
      $.ajax({
          type: 'POST',
          data: {
              'modal_id' : Id,
          },
          url : "upload.php",
          success: function(response) {
              if(response) {
                  $('kk').append(response);
                  $('#modal_'+Id).modal('show');
                  $(document).on('hidden.bs.modal', modal_id, function (event) {
                      $(this).remove();
                  });
              } else {
                  alert('Error');
              }
          }
      });
  });
  });
  </code></pre>
  
  <p>I want to add a loading image when the <strong>upload.php</strong> is under processing, and once the page loaded, then loading image will be disappeared and my result will be shown.  </p>
  
  <p>How can I add loafing image into above JavaScript while page is loading?</p>