로드 중 애니메이션 Spinner로드 중 페이지

Question

로딩 애니메이션 스피너를 w/ajax off로로드 된 JQueryMobile 페이지에 표시하고 싶습니다.

페이지는 내가 예상대로 내가 pagebeforecreate 및 pageshow 이벤트하지만이 작동하지 입어 data-ajax="false" 또는 rel="external"

와 함께로드됩니다 :

는

$('#page').live('pagebeforecreate',function(event){ 
    $.mobile.loading('show'); 
}); 

$('#page').live('pageshow',function(event){ 
    $.mobile.loading('hide'); 
}); 

Answer 1

귀하의 요청에 약간의 문제가있다.

먼저 간격을 지정하지 않고 ajax 로더를 표시하거나 숨길 수 없습니다. 이것이 없으면 페이지 쇼 이벤트 중에있을 수있는 유일한 상황이 있습니다. 다른 경우에는 setterval이 킥 스타트 로더에 필요합니다.

여기에 동작하는 예제입니다 : 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 로딩 만 계산됩니다.

예제는 매우 간단한 예제이기 때문에 로더가 표시되지 않습니다. 그러나이 줄을 주석으로 처리하면 작동하는 예제가 표시됩니다.