AJAX 로더를 사용하는 최선의 방법은 무엇입니까?

Question

콘텐츠 DIV를 동적으로 업데이트하기 전에 AJAX 로더를 가져 오기위한 몇 가지 솔루션을 구현했지만 "보편적"인 것처럼 보이지는 않습니다. 내가 재 작업 할 때마다 찾을 수 있습니다. 사용자가 페이지에서 클릭 한 내용에 따라 업데이트되는 내용의 DIV가 있고이 내용 DIV를 통해 로더를 표시하려는 경우 가장 좋은 방법은 무엇입니까? 일부 개발자는 항상 페이지에 로더를 가지고 있으며 블록 또는 아무 것도 표시하지 않고 다른 개발자가 DIV에 추가하는 것을 보았습니다. 업데이트 할 수있는 영역이 여러 개인 경우에는 어떻게해야합니까? 나는 함수를 호출 할 수있는 반복 가능한 무언가를 생각하고 있는데, 아마 몇 개의 매개 변수를 전달할 것입니다.

Answer 1

일부 JavaScript 라이브러리는 시작 및 종료 요청을 수신 할 수 있습니다. Prototype의 요청 응답자 http://www.prototypejs.org/api/ajax/responders을 확인하십시오.

당신은 같은 것을 할 것 :

이

Ajax.Responders.register({ 
    onCreate: function() { 
    $('loader').show(); 
    Ajax.activeRequestCount++; 
    }, 
    onComplete: function() { 
    Ajax.activeRequestCount--; 
    if (Ajax.activeRequestCount < 1) $('loader').hide(); 
    } 
}); 

로드의 시각적 표현에 관해서는, 당신이 요청 객체를 별도의 로딩 그래픽을 필요로 서브 클래 싱 할 수있다 페이지의 다른 부분을 식별 할 수 있습니다를, 때마다 요청 유형을 나타내는

예.
필드가 저장 되었습니까? new FieldUpdateRequest(field)
페이지가로드되고 있습니까? new Request();
컨테이너가 업데이트되고 있습니까? new PartialRequest(div);

그런 다음 각 하위 클래스 유형을 캡처하고 다른 로더 그래픽을 표시하거나 숨 깁니다.

불행히도 빠른 해결책은 없습니다. 로더 그래픽을 컨테이너에 추가하기위한 일반 스크립트를 만들면 반복을 줄일 수 있습니다. 당신이한다면, 여기에 게시하는 마음 :)?

Answer 2

JQuery progress bar 또는 다른 라이브러리에서 비슷한 것을 사용할 수 있습니다.