2013-12-19 2 views
1

JQuery Mobile 1.4.0을 사용하여 크로스 플랫폼 앱을 제작 중이며 phonegap으로 빌드됩니다. 예를 들어 나는 두 페이지를 가지고, 하나는 또 다른, #detail 페이지아약스 완료 이벤트 후 로딩 중 로딩 중

#homepage입니다
<div id="home" data-role="page> Home Page 
    <a href="#detail">Go Detail</a> 
</div> 
<div id="detail" data-role="page> Detail Page </div> 
아약스 괜찮 DOM에 페이지를로드하는

JQuery와 모바일의 기본 사용, 내 문제는 상세 페이지를 표시하기 전에, 내가 필요로한다는 것입니다 ajax 호출을 통해 원격 서버에서 데이터를 가져옵니다. 문서에 ajaxStart 및 ajaxComplete 이벤트를 등록하여 회 전자 표시 및 숨기기를 등록합니다.

$(document).ajaxStart(function(){ 
    $.mobile.loading('show'); 
}); 
$(document).ajaxComplete(function(){ 
    $.mobile.loading('hide'); 
}); 

문제는 두 번 호출됩니다 JQuery와 모바일 그래서 실제로 $ ajaxComplete 전에 로딩 스피너가 전환 방법이라고 숨기기, .mobile.loading ('숨기기')입니다. 데이터가 DOM에 채워지지 않아 세부 정보 페이지가 흰색 공백으로 표시되고 잠시 후 데이터가 삽입되므로 좋지 않습니다.

당신은 내가, 당신이 JQuery와 모바일 소스 코드에 볼 수 있었다 무슨 말인지 모르는 당신은 라인을 볼 수 있다면 5070

this._triggerCssTransitionEvents(to, from, "before"); 

// TODO put this in a binding to events *outside* the widget 
this._hideLoading(); 

그래서 제 질문은 정말 ajaxComplete 후 로딩 스피너를 숨기는 방법입니다 페이지 전환 이후가 아니야?

도움 주셔서 대단히 감사드립니다.

+0

최근 응용 프로그램 중 하나에서 '$ (document) .load' 이벤트와'$ (document) .ajaxStop' 이벤트에서 회 전자를 숨기지 않았습니다. – wf4

+0

@EthanZ 이것은 잠시 동안 나를 좌절 시켰습니다. 당신이 이것을 해결 했습니까? – ModusPwnens

답변

0

complete에서 stop으로 변경하면 로딩 스피너가 너무 빨리 숨기는 것을 막을 수 있습니다.

$(document).ajaxStart(function() { 
    $.mobile.loading('show'); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
}); 
+0

jquery 모바일은 전환으로 인해 페이지를 탐색 할 때 실제로 회 전자를 숨기기 때문에 작동하지 않습니다. – EthanZ