동적 내용의 프리 로더

Question

검색된 데이터를로드하는 데 대략 8 초 걸리는 동적 페이지가 있습니다.

문제는 모든 브라우저는 완전히

로드 한 후 그 8 초에 대한 오래된 페이지에 & 쇼 동적 페이지 남아있다.

내가 원하는 제품은 프리 렌즈 이미지입니다. 두 번째 페이지가로드 될 때까지 고객에게 표시됩니다.

어떻게하면됩니까?

감사합니다.

Answer 1

나는 AJAX를 통해 두 번째 페이지를로드한다고 가정합니다. 그렇다면 이후에만 의 결과를 표시 할 수 있습니다. 비동기 호출이 반환됩니다.

그러나이 AJAX 요청을 전송하기 전에 페이지를 변경하는 것을 막을 수있는 방법은 없습니다. 기본 구조는 다음과 같습니다

var preload = $('<div></div>').text('I am preloading!').insertAfter('somewhere'); 
$.get(..., function() { 
    preload.remove(); 
    // insert your real content, received from this AJAX request 
}); 

Answer 2

$('<div id="busy">Loading...</div>') 
     .ajaxStart(function() {$(this).show();}) 
     .ajaxStop(function() {$(this).hide();}) 
     .appendTo('body'); 

전부 그!

#busy 태그에 스타일을 추가 할 수도 있지만 CSS로 할 수 있습니다.