Дисплей Загрузка изображения на странице загрузки Ajax

Question

У меня есть кнопка, когда мы нажимаем на нее, база данных будет обновлена, а результат будет отображаться на странице, на основе upload.php ((этот раздел работает хорошо, I нет никаких проблем с этим.))

<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'); 
      } 
     } 
    }); 
}); 
}); 

Я хочу, чтобы добавить изображение загрузки, когда upload.php под обработку, и как только страница загружена, то загружается изображение будет исчез и мой результат будет показано на рисунке.

Как я могу добавить бланк изображения в JavaScript, пока загружается страница?

Answer 1

Стиль A Loader и сделать дополнительный класс для его отображения. Я назвал свой класс active. На клике вы показываете загрузчика и по завершении скрываете его. Используйте complete -Callback, потому что запрос может быть неудачным.

<div id="loader"></div> 

$("BB").click(function() { 
var Id = jQuery(this).attr("id"); 
$('#loader').addClass('active'); 
$.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'); 
     } 
    }, 
    complete: function() { 
     $('#loader').removeClass('active'); 
    } 
}); 
});