2013-04-29 4 views
0
에 이상하게 동작

내 간단 페이지 홀더를 많이 보유하고 index.html :jQuery를 모바일 전환은 아이폰

var resources = [{ 
    id: "#homePage", 
    url: "pages/homePage.html" 
}, 
{ 
    id: "#walletPage", 
    url: "pages/walletPage.html" 
}] ... 
$(document).ready(function() { 
    $.mobile.defaultPageTransition = "slide"; 
    loadResource() 
}) 

모든 것이 폰갭 내부에 싸여있다 :

<body> 
    <div data-role="page" id="homePage"></div> 
    <div data-role="page" id="registrationPage"></div> 
    <div data-role="page" id="walletPage"></div> 
    .. and a lot of page holders 
</body> 

내 자바 스크립트 실행시에 모든 페이지를로드 기본 앱을 제공합니다. 이제 문제는 모든 동적 페이지입니다. 처음으로 슬라이딩 애니메이션은 iPhone에서 엉망입니다. 두 번째 이후부터는 모든 것이 예상대로 작동합니다. 그것은 저에게 브라우저 캐싱 문제의 일종처럼 보입니다.

어떻게 해결하거나 디버깅 할 수 있는지 제안 해주세요.

답변

1

이 문제의 표준 Phonegap + jQuery Mobile은 리소스 프리 로더로서 require.js을 사용합니다. 기본적으로 앱 초기화 중 모든 항목을로드하려면 require.js을 사용합니다.

다른 가능한 '문제'가 문서로 준비되었습니다. ready 함수가 일반적인 일반 jQuery와 달리 jQuery Mobile과 함께 사용하면 안됩니다. jQuery Mobile 페이지 로딩은 문서 준비 상태와 관련이 없거나 연결되어 있지 않습니다. 문서 준비 상태 트리거 일 때 jQuery Mobile은 여전히 ​​페이지를 DOM에로드/강화합니다. 이것은 문제의 원인 일 수 있습니다.

이 문제를 해결하려면 jQM 개발자는 페이지 이벤트라고하는 또 다른 페이지 상태 집합을 만들었으며 그 중 일부만 있습니다. 자세한 내용을 보려면 내 다른 기사/대답을 읽어보십시오. jQuery Mobile: document ready vs page events