AJAX 응답을 기다리는 동안 이미지를 로드하려면 어떻게 해야 합니까?

AJAX 응답을 기다리는 동안 이미지를 로드하려면 어떻게 해야 합니까?

제가 조언을 좀 얻을 수 있을까 해서요.아약스 요청에 대한 답변을 받는 동안 로딩 gif를 사용하려고 합니다.제가 직면한 문제는 이메일을 보내는 동안 gif가 표시되지 않는다는 것입니다.

해결책을 찾기 위해 여기에 있는 여러 페이지를 살펴보았지만 아무 것도 작동하지 않는 것 같습니다.제가 본 페이지는 다음과 같습니다: jQuery agax가 실행되는 동안 gif 이미지 로드 및 agax로 게시하는 동안 로드 이미지 표시 및 $.ajax가 수행되는 동안 로드 이미지 표시

이를 위해 다음 코드를 사용했습니다.

$("#loading").bind("ajaxStart", function(){
$(this).show();
}).bind("ajaxStop", function(){
$(this).hide();
});

이것은 gif를 보여주지 않습니다. 저는 또한 다음을 시도했습니다.

$.ajax({
 type: "POST",
 url: "contact1.php",
 data: dataString,
 beforeSend: loadStart,
 complete: loadStop,
 success: function() {
  $('#form').html("<div id='msg'></div>");
  $('#msg').html("Thank you for your email. I will respond within 24 hours. Please reload the page to send another email.")
 },
 error: function() {
  $('#form').html("<div id='msg'></div>");
  $('#msg').html("Please accept my apologies. I've been unable to send your email. Reload the page to try again.")
 }
}); 
return false;
});
function loadStart() {
  $('#loading').show();
}
function loadStop() {
  $('#loading').hide();
}

저는 $("#loading")을 넣는 것도 시도해 보았습니다.성공 및 오류 함수에서 unsing.hide()와 ajax 요청 앞에 show()를 표시합니다.아직 아무것도 안 보여요.

잘 부탁드립니다.

실제로 AjaxStart 및 Stop 이벤트를 청취하고 이를 다음에 바인딩하여 이 작업을 수행해야 합니다.document:

$(document).ready(function () {
    $(document).ajaxStart(function () {
        $("#loading").show();
    }).ajaxStop(function () {
        $("#loading").hide();
    });
});

$(document).ajaxStart(function() {
  $("#loading").show();
}).ajaxStop(function() {
  $("#loading").hide();
});

$('.btn').click(function() {
  $('.text').text('');
  $.ajax({
    type: "GET",
    dataType: 'jsonp',
    url: "https://api.meetup.com/2/cities",
    success: function(data) {
      $('.text').text('Meetups found: ' + data.results.length);
    }
  });
});

#loading { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn">Click Me!</button>
<p class="text"></p>
<div id="loading">
  <!-- You can add gif image here 
  for this demo we are just using text -->
  Loading...
</div>

언급URL : https://stackoverflow.com/questions/16881626/how-do-i-load-an-image-while-waiting-for-ajax-response