jquery mobile跳转闪屏问题解决方案

  近期公司有一个项目是要开发一个移动端的基于页面的应用,其中需要完善的地方就是:尽量使这个看起来像个应用,于是就涉及到了页面的效果的问题。由于之前接触过的框架是jquery mobile,所以直接拿来用。刚初步解决了这个问题,总共分三步。

  第一步,为了避免html之间链接跳转的硬伤,应用里面只留一个html。也就是所有的子页面都用“page + id” 的方法来实现,用“a href = '#xx' ”来实现跳转。光这样还是不够,所以第二步:将每个page上的“ position='fixed' ”删掉(如果有的话)。至此还是有些不尽人意:页面跳转还是不流畅,效果出来时有卡顿。最后第三步:在链接上面添加“ data-prefetch='true' ”,此作用为预取和缓存,用以提高跳转的效果。

  另有人用修改css代码隐藏背景的方式来修复,个人觉得应该也是可以的,不过对于性能应该没有帮助。

  由于时间仓促,所以大致的写出来分享,言语有不尽之处,还是用一段代码来结尾:

  

 1 <html>
 2 <body>
 3 <div data-role="page" >
 4 
 5 <ul>
 6     <li><a href="#page1"  class="ui-btn-active ui-state-persist">第一页</a></li>
 7     <li><a href="#page2"  data-transition="flip" data-prefetch="ture">第二页</a></li>
 8     <li><a href="#page3"  data-transition="slide" data-prefetch="ture">第三页</a></li> 
 9 </ul>
10 
11 </div>
12 
13 <div data-role="page" >
14 
15 <ul>
16     <li><a href="#page1"  data-transition="turn" data-prefetch="ture">第一页</a></li>
17     <li><a href="#page2"  class="ui-btn-active ui-state-persist"  data-prefetch="ture">第二页</a></li>
18     <li><a href="#page3"   data-transition="pop" data-prefetch="ture">第三页</a></li> 
19 </ul>
20 
21 </div>
22 
23 <div data-role="page" >
24 
25 <ul>
26     <li><a href="#page1" data-transition="turn" data-prefetch="ture">第一页</a></li>
27     <li><a href="#page2"  data-transition="slideup" data-prefetch="ture">第二页</a></li>
28     <li><a href="#page3"  class="ui-btn-active ui-state-persist">第三页</a></li> 
29 </ul>
30 
31 </div>
32 </body>
33 </html>

10月9日新增:在链接上面加data-prefetch="true"的同时加上data-transition="none"可完美解决此问题,测试条件:jquery-1.11.1.min.js , jquery.mobile-1.4.2.min.js ,谷歌浏览器。