I've a button that when we click on it, database will be updated and then result will show on page, based on upload.php (( this section is working well, I have no problem with this.))
<BB id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal" style="text-decoration:none">
<kk><!--show updated columns information here--></kk>
$(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');
}
}
});
});
});
I want to add a loading image when the upload.php is under processing, and once the page loaded, then loading image will be disappeared and my result will be shown.
How can I add loafing image into above JavaScript while page is loading?