Question

在我的Android平台的jQuery移动应用程序中，当我从一个页面移动到另一个页面时，页面闪烁并花时间显示“过渡太慢”我已将所有锚点的数据转换设置为“无”并且使一些更新如下，但问题仍然是，我应该怎么做才能让应用程序更快？

请帮帮我....

Main.html

 <html>
 <head>  
 <meta charset="utf-8" /> 
 <meta name="format-detection" content="telephone=no" />  
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0,     minimum-scale=1, width=device-width,
 height=device-height, target-densitydpi=device-dpi" />
 <link rel="stylesheet" type="text/css" href="css/index.css" />
 <link rel="stylesheet" href="css/CustomStyles.css">
 <script src="js/jquery-1.8.2.min.js"></script>      
 <link href="css/jquery.mobile-1.3.2.min.css"     rel="stylesheet" type="text/css" />
 <script src="js/jquery.mobile-1.3.2.min.js"  type="text/javascript"></script>
 <script type="text/javascript" src="phonegap.js"></script>
 </head>
 <body>
 <div data-role="page"    id="Main" >
 <div data-role="header"   > </div>
 <div data-role="content">
 <a href="Profile.html"  data-transition="none"  data-role="button"  data-theme="none"                  data-shadow="false"  data-corners="false" ><img src="images/profile.png"   /></a><BR><BR>                       <BR><BR>
<font color="white"  size="6px"  >  Profile </font>
</div>
<script type="text/javascript" src="js/disableTransition.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
</div>
</body>
</html>

我已将以下内容添加到我的css文件“CustomStyles.css”中：

.ui-page {
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  -webkit-touch-callout: none;              

 }

.in, .out {
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-duration: 250ms !important;
  }

* {
   -webkit-transform: translateZ(0);
   }

disableTransition.js //似乎无法正常工作，因为我已添加警报以检查其是否有效，但警报未显示

document.addEventListener('mobileinit', MobileInit, false);


function MobileInit()
{
   alert('IN Mobile INIT Func');
   $.extend(  $.mobile , { defaultPageTransition: 'none' });
   $.mobile.defaultPageTransition = 'none';
   $.mobile.defaultDialogTransition = 'none';
   $.mobile.buttonMarkup.hoverDelay = 0;


 }

Answer 1

在此处找到fastclick.js：https://github.com/ftlabs/fastclick。

将.js链接到您的文档。

只需添加

<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>

到我的文件头。

在页面之间导航时不再闪烁/闪烁。

Jquery mobile需要花时间在页面之间导航

1 个答案: