jQueryMobile 轉場閃屏之終極解決

wuyifeitian2發表於2012-09-03

   經過了幾天的糾結,查閱了各種網路資料:度娘、谷哥……   最後在Stackoverflow上終於有所斬獲,竊喜…… 現將其分享給大家,以期共同學習!


  • 關於JQM轉場閃屏的問題:

轉場時出現有白屏閃爍現象,使用者體驗不好。

可以通過下面的樣式修正:

Css程式碼  

1.  .ui-page {  

2.      backface-visibility: hidden;  

3.      -webkit-backface-visibility: hidden; /* Chrome and Safari */  

4.      -moz-backface-visibility: hidden; /* Firefox */  

5.  }  

 

注意: 

    只需要在頁面元素增加背面不可見,來防止動畫發生的時候產生的閃屏。

 

 

  • 關於JQM轉場時頁面來回跳轉的問題:

頁面跳轉時在出發頁面和目標頁面之間來回跳轉,在真機上尤為明顯,使用者體驗很差。

Stackoverflow的解釋:

By default jQM always makes an AJAX request forpages even if you've already visited it before. If you set $.mobile.page.prototype.options.domCache =true; then onlywill jQM not reload pages.

 

所有訪問過的頁面都快取到DOM中:

$.mobile.page.prototype.options.domCache= true;

可以快取特定的某個頁面,給page容器新增如下屬性:

<divdata-role="page" id="cacheMe" data-dom-cache="true">

也可以通過程式來控制:

pageContainerElement.page({ domCache: true}); 

 

注意:

    DOM快取的缺點是DOM可能會變得很大,某些裝置上會導致變慢或者記憶體問題。如果你開啟了dom快取, 請一定要管理好DOM並且把你的網站在真機上測試好。

 

 感想: 

     查專業資料,還得找谷歌啊……

     還有,jqm中文網很爛!必須還是官網權威!

     


參考地址:

jqueryMobile官網DOM快取:

http://www.jqmapi.com/componts/page/Prefetching%20.html

Stackoverflow參考地址:

http://stackoverflow.com/questions/9503141/when-does-jquery-mobile-reload-a-page-when-browsing-back-and-forth

相關文章