비동기 요청 중 로딩 이미지 표시

$.ajax를 사용하여 비동기 요청을 수행하면 시각적 표시가 부족하여 혼란을 초래할 수 있습니다. 지속적인 프로세스. 이 문서에서는 이러한 요청 중에 로딩 이미지를 표시하는 기술을 살펴봅니다.

우선 제공된 코드 조각은 URL에 대한 비동기 요청을 수행하고 수신된 HTML을 'info' 클래스가 있는 요소에 추가합니다. 로딩 이미지를 표시하려면 'id'가 'loading-image'인 이미지 요소를 사용할 수 있습니다.

한 가지 접근 방식은 요청하기 전에 이미지를 표시하고 완료 후에는 숨기는 것입니다.

$('#loading-image').show();
$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
  complete: function(){
    $('#loading-image').hide();
  }
});

보다 일반적인 접근 방식은 로딩 이미지를 전역 ajaxStart 및 ajaxStop 이벤트에 바인딩하는 것입니다. 이러한 방식으로 이미지는 모든 비동기 요청에 대해 표시됩니다:

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

이러한 기술은 진행 중인 비동기 요청에 대한 사용자 친화적인 표시를 제공하여 사용자 경험을 향상시킵니다.