jquery mobile跳转闪屏问题浅析

浏览数：29 / 时间：2015年06月09日

　　近期公司有一个项目是要开发一个移动端的基于页面的应用，其中需要完善的地方就是：尽量使这个看起来像个应用，于是就涉及到了页面的效果的问题。由于之前接触过的框架是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" id="page1">
 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" id="page2">
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" id="page3">
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>