mvc4 with jQuery mobile - 페이지로 이동할 때 이미지로드하기 (링크 또는 포스트 백)

Question

jQuery mobile은 페이지가로드 될 때 멋진 페이지 로딩 애니메이션을 수행하지만 데이터가 많은 페이지의 경우 여전히 새로로드 된 페이지가 표시 될 때까지 '흰색'페이지가 잠시 나타납니다. 이 문제를 해결하려면 다음 코드를 사용하고 있습니다.

$.mobile.loading('show', { 
text: 'foo', 
textVisible: false, 
theme: 'a', 
html: "" 
}); 

그럼에도 불구하고 나는 흰 페이지를 볼 수 있습니다. 실제 페이지가로드 될 때까지 흰색 페이지에 애니메이션을 표시하는 방법이 있습니까? 왼쪽 탐색 버튼을 클릭하면 http://www.amerimark.com 로딩 메시지를 표시하는 웹 사이트의 방식이 마음에 듭니다.

Answer 1

여기에 동작하는 예제입니다 : http://jsfiddle.net/Gajotres/Zr7Gf/

$(document).on('pagebeforecreate', '#index', function(){  
    var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  
}); 

$(document).on('pageshow', '#index', function(){ 
    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },1);  
}); 

그러나 여기 페이지가 복잡한만큼 새로운 페이지가 매우 빠르게로드됩니다하지 않는 한 우리는 다른 문제가 있습니다. jQuery 모바일은 페이지가 얼마나 빨리 DOM에로드되는지를 보여주는 내부 타이머를 가지고 있습니다. 페이지가 복잡하고로드하는 데 10 밀리 초가 더 걸리면 아무리 노력해도 다른 로더가 표시되지 않습니다.

또한 DOM로드 만 해당 10ms에 포함됩니다. 페이지 스타일 및 전환이 계산에서 벗어났습니다. 따라서 페이지 로딩이 더 길어 지더라도 DOM 로딩 만 계산됩니다.

예제는 매우 간단한 예제이고 pageshow 이벤트가 거의 즉시 트리거되기 때문에 로더가 표시되지 않습니다. 귀하의 경우 페이지가로드 될 때까지의 pageshow 이벤트가 연장 될 것이기 때문에 작동한다에서

$.mobile.loading('hide'); 

:이 라인을 주석 처리한다면 당신은 예를 노력하고 있습니다 볼 수 있습니다.