디스플레이 Ajax 로딩 중 이미지로드

Question

버튼을 클릭하면 데이터베이스가 업데이트되고 결과는 upload.php을 기반으로 한 페이지에 표시됩니다 (이 섹션은 잘 작동하고 있습니다. 이 아무 문제가 없습니다.))

<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 표시를위한 추가 클래스를 작성하십시오. 나는 수업을 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'); 
    } 
}); 
});