jQuery를 사용하여 AJAX 요청 중에 로딩 이미지를 표시하려면 어떻게 해야 합니까?

Ajax 실행 중 로딩 이미지 표시

비동기 요청 실행을 나타내기 위해 로딩 이미지를 표시하는 것이 종종 바람직합니다. jQuery의 $.ajax 메소드를 사용하여 이를 달성하는 방법을 살펴보겠습니다.

이미지 소개

원하는 동작에는 진행 중인 요청을 나타내는 이미지를 표시하는 것이 포함됩니다. 간단한 HTML 설정은 다음과 같습니다.

<img>

AJAX 요청 사용자 정의

$.ajax 요청을 원하는 시각화로 보강하려면 다음을 포함해야 합니다.

• 요청하기 전에 로딩 이미지 표시: fadeIn() 또는 show() 메소드를 사용하여 로딩 이미지를 표시합니다.
• 완료 후 로딩 이미지 숨기기: 후 로딩 이미지를 제거하려면 fadeOut() 또는 hide() 메소드를 사용하십시오. 요청이 완료됩니다.

맞춤형 AJAX 요청:

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

이벤트 기반 접근 방식

대체 접근 방식은 글로벌 ajaxStart 및 ajaxStop jQuery 이벤트를 활용합니다. 이를 통해 모든 AJAX 이벤트에 대한 비동기 시각화가 가능합니다.

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

이러한 기술을 구현하면 개발자는 로딩 이미지를 효과적으로 표시하여 비동기 요청 중에 시각적 피드백을 제공할 수 있습니다.

위 내용은 jQuery를 사용하여 AJAX 요청 중에 로딩 이미지를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!