首页 > 代码库 > jquery mobile跳转闪屏问题浅析

jquery mobile跳转闪屏问题浅析

2024-07-16 07:50:09   212人阅读

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

　　第一步，为了避免html之间链接跳转的硬伤，应用里面只留一个html。也就是所有的子页面都用“page + id” 的方法来实现，用“a href = http://www.mamicode.com/‘#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>

 


联系
我们