2010-11-22 3 views
6

모바일 사파리의 모든 페이지 요소 (화면 밖에서도 포함)의 렌더링/업데이트를 강제하는 방법이 있습니까?모바일 사파리에서 전체 페이지 렌더링을 강제 하시겠습니까?

PhoneGap을 사용하여 응용 프로그램을 작성 중이며 DOM 요소의 "저장된"오프 스크린에있는 JS를 통해 번호를 업데이트하려고 할 때 iOS에서 문제가 발생합니다. 요소는 HTML 내에 있지만 버튼을 눌러 필요할 때까지 화면 밖으로 배치됩니다. 번호를 표시하기 위해 버튼을 누르면 요소가 다시 나타납니다.

모바일 사파리가 페이지 요소 (또는 요소의 섹션)를 화면에 표시 할 때 렌더링하는 것을 좋아한다는 사실을 알고있었습니다. 예를 들어 이미지를 확대하면 볼 수있는 부분 만 렌더링되고 보이지 않는 다른 섹션으로 스크롤하면 렌더링이 시작됩니다 (시간이 걸립니다).

< span>의 내용을 새로운 문자열 (숫자)로 바꾸 겠지만 < span>이 화면을 벗어난 경우 화면에 표시 될 때까지 업데이트되지 않는 것처럼 보입니다. 최신 정보.

이 문제에 대한 해결 방법이 있습니까? 아니면이 문제를 해결하기 위해 시도해야합니까?

<div class="menu_container" id="menu_menu">  
<p id="hit_pct"><span class="gold">100</span> Hit %</p> 
</div><!-- /#menu_menu --> 

menu_menu이 위치하여 오프 스크린 위치 : 나는

HTML ... 그것이 내가 동적 오프 스크린 요소를 변경하고 필요할 때 화면을 철수 할 수없는 오히려 이상한 생각합니다. 그런 다음 버튼을 누르십시오. menu_menu가 슬라이드를 시도하면 처음에는 span 요소가 나타나지 않으므로 문제가됩니다. 그런 다음 천천히 렌더링되고 슬라이드 애니메이션이 완료됩니다.

나는 슬라이딩 애니메이션을 사용하지 않으려 고 노력했으며 그 결과는 동일하게 유지됩니다. 요소가 충분히 빠르게 렌더링되지 않으므로 전체 컨테이너가 적당한 시간 내에 나타나지 않습니다.

if(aTilesHit == 0){ 
    pct = 100; 
}else{ 
    pct = Math.round((abTilesHit/aTilesHit)*100); 
} 
x$('#hit_pct').inner('<span class="gold">'+pct+'</span> Hit %'); 

자바 스크립트 메뉴가 열립니다 : 요소를 업데이트

자바 스크립트

animationsOn = false; //Halts the animations that will be behind the menu 
if(x$('.menu_button').hasClass('active')){ 
    close_menus(); 
}else{ 
    x$('#ingameMenus').css({'left':0}); //Positions the menu on screen 
    x$('.menu_container').removeClass('hidden'); //.hidden positions the element offscreen. It does NOT add display=hidden 
    x$('.menu_button').addClass('active'); 
} 

감사합니다, 요르단

참고 :이 안드로이드 브라우저에 발생하지 않습니다 그래서 Mobile Safari가 페이지 렌더링을 처리하는 방법과 직접적으로 관련이 있다고 느낍니다.

+0

는 "영원히 걸립니다. " 버튼 스 프레스와 html의 일부분을이 기간 동안 게시 할 수 있습니까? – atlavis

+1

코드 스 니펫이 추가되었습니다. – Empereol

답변

1

화면에 표시되지 않는다고 말하면 display: none;을 사용하여 요소를 숨길 수 있습니까?

요소의 콘텐츠는 여전히 자바 스크립트를 통해 사용할 수 있지만 화면에 표시되지는 않습니다.

관련 문제