ajax 응답을 기다리는 동안 "로드"를 표시하는 jQuery 플러그인

Question

드롭 다운 옵션이 변경 될 때 서버에 요청을 보내는 jQuery Ajax 코드를 작성했습니다. 이 변경에 따라 4 ~ 5 개의 텍스트 필드가 데이터를 변경하고 많은 새로운 이미지가로드됩니다. 모든 것이 멋지게 느껴집니다.

그러나 jQuery가 제공하는 플러그인이 페이지를 어둡게 만들 수있는 플러그인이 있는지 궁금합니다 ... 요청이 서버에서 다시 돌아올 때까지 잠시 동안 '로드'또는 스피너를 보여줍니다. 나는 주위에 하나를 본 것을 기억하지만 그것을 찾을 수 없다.

Answer 1

당신이 불리는 일반적인 ajax 객체로 전달할 수있는 두 가지 개체가 있습니다. ajaxStart 그리고 ajaxStop. 이들은 Ajax 쿼리가 전송 및 수신 될 때마다 발사되는 이벤트 처리기입니다.

ajaxstart (글로벌 이벤트)
이 이벤트는 AJAX 요청이 시작되고 다른 AJAX 요청이 현재 실행되지 않으면 방송됩니다.

Ajaxstop (글로벌 이벤트)
이 글로벌 이벤트는 더 이상 AJAX 요청이 처리되지 않으면 트리거됩니다.

이를 염두에두고 다음을 설정하는 것은 매우 쉽습니다.

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

그냥 당신을 만드십시오 #loading 당신이 좋아하는 div- 수많은 Lightbox 플러그인을 살펴 보거나 블록 당신이 요청한 것과 같은 것을 성취합니다.

물론, 당신은 당신이 원하는대로 할 수 있도록 설정할 수 있지만, 일단 스크립트 상단에 설정되면 세트와 포트입니다.

Blockui 플러그인을 사용하는 경우 다음과 같습니다.

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

Answer 2

jQuery ajax 이벤트 방법을 사용하는 것이 좋습니다 ajaxstart () 및 ajaxcomplete ()

AJAX 이벤트에 따른 문서