2010-11-22 7 views
6

Mobile Safariですべてのページ要素(オフスクリーンのものさえも)のレンダリング/更新を強制する方法はありますか?モバイルSafariでフルページレンダリングを強制しますか?

PhoneGapを使用してアプリケーションを構築していて、オフラインのDOM要素に保存されているJS経由で番号を更新しようとすると、iOSで問題が発生しています。要素はHTML内にありますが、ボタンを押すことによって必要になるまでオフスクリーンに配置されます。番号を表示するためにボタンを押すと、要素が再び表示されるまでに時間がかかります。

モバイルSafariは画面上に表示されているようにページ要素(または要素のセクション)をレンダリングすることが気に入っています。例えば、画像を拡大すると、表示されている部分だけがレンダリングされ、表示されていない他の部分をスクロールすると、レンダリングが開始されます(時間がかかります)。

私は<スパンの内容を新しい文字列(数字)に置き換えていますが、<スパン>がオフスクリーンの場合、オンスクリーンで呼び出すまで更新されていないように見えます。更新。

これには修正/回避策がありますか、または今後これを回避しようとする必要がありますか?

<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がスライドインしようとすると、スパン要素が最初に表示されないため、メニューが表示されます。その後、ゆっくりとレンダリングされ、スライドアニメーションが完了します。

スライドアニメーションを使用しないようにしましたが、結果は変わりません。要素が十分に素早くレンダリングされないので、コンテナ全体が適切な時間内に表示されません。

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

JavaScriptのメニューを開きます:要素を更新

はJavaScript

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'); 
} 

おかげで、 ヨルダン

注:これは、Androidのブラウザでは発生しません。私はそうMobile Safariがページレンダリングをどのように処理するかに直接関係していると感じています。

+0

「私は数を表示するには、ボタンを押すと、それが再表示される要素のために永遠になります。 "このスパンでボタンプレスとhtmlの一部にアクションコードを投稿できますか? – atlavis

+1

コードスニペットが追加されました。 – Empereol

答えて

1

あなたはそれがオフスクリーンになっていると言いますが、代わりにdisplay: none;を使用して要素を隠すことはできますか?

要素のコンテンツは引き続きJavaScriptで利用できますが、画面には表示されません。

関連する問題