jquery移動iphone頁面閃爍

Question

我正在處理移動頁面應用程序，其中一個頁面很長，（這個頁面太長了，如果我必須從上到下查看它，我必須滾動6次Iphone。）

在這個頁面加載後，它會跳轉並結算。或在加載後閃爍，並且對用戶非常惱人。

此頁面上的數據正在運行時呈現。我有空div元素，我在運行時使用jquery pageshow事件填充字段名稱和值。

我發現，如果我縮短了長度通過刪除一些數據正在呈現閃爍現象消失， 但我不能這樣做

業務並不想更改設計，我已經試過各種技巧，以防止這種閃爍，現在我已經用盡了想法， 我試圖延遲顯示頁面，直到頁面加載完全，不起作用，雖然

你可以請幫忙，有沒有任何解決方案防止此頁面閃爍。

感謝 艾拉

Answer 1

，直到所有的數據被加載您可以實現一個小加載圖標。這將給用戶帶來無盡的體驗，但仍然符合業務需求。

沿着具有顯示無包裝div的行。加載時，加載div會顯示loading.png的背景圖片。當內容被加載時，設置包裝div顯示並移除加載div。

雖然不同的方式加載數據會更好，但我知道這並不總是可行的。

Answer 2

對於jQuery Mobile的，讓你的footer持續並防止部分從動畫。

<div data-role="footer" data-id="foot" data-position="fixed"> 
    <h4>Page 1 Footer</h4> 
</div><!-- /footer --> 

jsFiddle DEMO

---

編輯：最新進展

以上的jsfiddle jQuery Mobile的演示進行了修訂，使用jQuery 1.7.2使用jQuery移動1.2.0。

我才發現，原來使用的jsfiddle使用jQuery 1.8.2和jQuery移動1.2.0當overflow說的jsfiddle內使用scrollBars功能時設定爲hidden按預期不起作用。

該功能是在jQuery動畫期間隱藏瀏覽器滾動條，防止元素在頁面更改的動畫期間短暫跳來跳去。

的瀏覽器滾動條其實隱藏，但在body部分元素繼續「跳」彷彿滾動條仍然存在。

當jsFiddle jQuery設置爲1.7.2時，不會發生這種情況。

Answer 3

什麼你指的是被稱爲 「閃爍」 作爲已經有據可查的，問了幾次，就在這裏：

jQuery Mobile blinking at page transitions on iPad

Transitions blink on jQueryMobile pages navigation

https://github.com/jquery/jquery-mobile/issues/4024

我有在我的Android手機（v4.0.4）上使用在PhoneGap上構建的應用程序時出現同樣的問題：從我的主頁（包含長data-role="listview"）會導致屏幕在執行前閃爍。什麼做的把戲我被添加user-scalable=no到視meta標籤：

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" /> 

雖然其他人已經通過重寫的jQuery移動CSS和/或完全禁用頁面轉換，取得了成功：

CSS

.ui-page { 
    -webkit-backface-visibility: hidden; 
} 

JS

$(document).bind("mobileinit", function() { 
    $.mobile.defaultPageTransition = "none"; 
});