如何改善Jquery移动应用程序的页面过渡? [英] How can I improve the page transitions for my Jquery mobile app?
本文介绍了如何改善Jquery移动应用程序的页面过渡?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一个HTML页面中创建了一个微型的Jquery Mobile应用程序. 我面临的问题是，移动设备中页面转换的性能令人恐惧.滑动至下一页后，页面更改后我将等待3-4秒. 有什么想法可以改进吗?
I have created a tiny Jquery Mobile app in a single HTML page. The problem I am facing is that the performance of page transitions in Mobile devices is horrendous. After I swipe to goto next page, I end up waiting for 3-4 seconds befoe the page changes. Any ideas how I can improve it?
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/docs/_assets/css/jqm-docs.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<form id="test" method="post">
<!-- Start of page: #p01 -->
<div data-role="page" id="p01" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 01 of 05</h1>
</div><!-- /header -->
<div data-role="content" >
<h3>Please provide these details about the child</h3>
<br/>
<fieldset>
<label>Child's Full Name:</label>
<fieldset>
<input id = "p01_childFirstName_text" type="text" placeholder="First Name...">
<input id = "p01_childMidName_text" type="text" placeholder="Middle Name...">
<input id = "p01_childLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Child's Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderMale_radio" value="choice-1" checked="checked" />
<label for="p01_childGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderFemale_radio" value="choice-2" />
<label for="p01_childGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderOther_radio" value="choice-3" />
<label for="p01_childGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset>
<label for = "p01_childEthnGroup_text">Child's Ethnic Group or Race:</label>
<input id = "p01_childEthnGroup_text" type="text" placeholder="Ethnic Group...">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Birth Date:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Grade in School:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="flip-1">Is the Child attending a School?</label>
<select name="flip-1" id="flip-1" data-role="slider" data-theme="a">
<option value="off">Yes</option>
<option value="on">No</option>
</select>
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of page: #p02 -->
<div data-role="page" id="p02" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 02 of 05</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h3>Please provide these details about the child's parent</h3>
<p><small><em>Please enter these details even if the parents are not working now.
Be specific - for example: auto mechanic, high school teacher, home maker,
day labourer, lathe operator, army sergeant etc.
</em></small></p>
<br/>
<fieldset>
<label for="p02_fatherWorkType_text">Father's Type of Work:</label>
<input id = "p02_fatherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label for="p02_motherWorkType_text">Mother's Type of Work:</label>
<input id = "p02_motherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label>Your Full Name:</label>
<fieldset>
<input id = "p02_userFirstName_text" type="text" placeholder="First Name...">
<input id = "p02_userMidName_text" type="text" placeholder="Middle Name...">
<input id = "p02_userLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Your Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderMale_radio" value="choice-1" checked="checked" />
<label for="p02_userGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderFemale_radio" value="choice-2" />
<label for="p02_userGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderOther_radio" value="choice-3" />
<label for="p02_userGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset data-role="controlgroup">
<legend>Your Relation with the Child:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationBio_radio" value="choice-1" checked="checked" />
<label for="p02_userRelationBio_radio">Biological Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationAdopt_radio" value="choice-2" />
<label for="p02_userRelationAdopt_radio">Adoptive Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationStep_radio" value="choice-3" />
<label for="p02_userRelationStep_radio">Step Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationGrand_radio" value="choice-3" />
<label for="p02_userRelationGrand_radio">Grand Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationFoster_radio" value="choice-3" />
<label for="p02_userRelationFoster_radio">Foster Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationOther_radio" value="choice-3" />
<label for="p02_userRelationOther_radio">Others (Please Specify)</label>
<input class= "p02_input_hidden_text" id = "p02_userRelationOther_text" type="text" placeholder="Specify Relation...">
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of page: #p05 -->
<div data-role="page" id="p05" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Last Page</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h2>Congratulations! You have filled out the Child Behaviour Checklist.</h2>
<p><small><em>Please click on the "SUBMIT" button below to send us the checklist.</em></small></p>
<br/>
<br/>
<br/>
<button type="submit" data-theme="a" class="ui-btn-hidden" data-disabled="false">Submit</button>
</div><!-- /content -->
</div><!-- /page five -->
</form>
<style>
.footer_text {
text-align:center;
}
</style>
<script>
$( document ).on( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading...";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
$(document).on ('pageshow', function (e, data) {
// keep all previously-visited pages in the DOM. Remove this option later when application becomes large.
$.mobile.page.prototype.options.domCache = true;
var activePage = $.mobile.activePage.attr("id");
var previousPage = (parseInt(activePage.slice(1,3))-1).toString();
var nextPage = (parseInt(activePage.slice(1,3))+1).toString();
window.myActivePage = activePage;
window.myPreviousPage = "#p0" + previousPage;
window.myNextPage = "#p0" + nextPage;
});
// page navigation on using swipes
$(document).on('swipeleft',function(event, ui){
$.mobile.changePage(window.myNextPage, { transition: "slide"});
});
$(document).on('swiperight',function(event, ui){
$.mobile.changePage(window.myPreviousPage, { transition: "slide", reverse:true});
});
// Code to show and hide fields. Spaghetti code. Refactor this when working on actual app.
$(document).ready(function() {
$('[id=p02_userRelationOther_text]').hide()
$('[type=radio]').click(function(eventName) {
if (this.id == 'p02_userRelationOther_radio') {
$('[id=p02_userRelationOther_text]').show('slow')
}
else {
$('[id=p02_userRelationOther_text]').hide('slow')
}
});
$('[id=p03_noSports_check]').click(function(eventName) {
if ($('[id=p03_noSports_check]').is(":checked")) {
$('[class=p03_hidden_container]').hide('slow')
}
else {
$('[class=p03_hidden_container]').show('slow')
}
});
$('[id=p04_noHobby_check]').click(function(eventName) {
if ($('[id=p04_noHobby_check]').is(":checked")) {
$('[class=p04_hidden_container]').hide('slow')
}
else {
$('[class=p04_hidden_container]').show('slow')
}
});
});
</script>
</body>
</html>
推荐答案
有几种方法:
-
如果您使用的是！具有多个页面的html文件，将它们包装到单个div中:
In case you are using ! html file with multiple pages, wrap them into single div:
<div id="container"/>
并设置此CSS:
body {
margin: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
js代码:
$(document).one("mobileinit", function () {
$.mobile.pageContainer = $('#container');
$.mobile.defaultPageTransition = 'slide';
});
有关此方法的更多信息，请参见: http://outof.me/fixing-flickers-jumps-jquery-mobile-transitions-in-phonegap-apps/
More about this aproach can be found here: http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/
- 其他常见的解决方案是设置此CSS: .ui-page { -webkit-backface-visibility:隐藏； }
- Other common solution is to set this css: .ui-page { -webkit-backface-visibility: hidden; }
该解决方案的问题在于，它破坏了表单上的选择"列表.
The problem with that solution is that it breaks Select list on your forms.
-
将其关闭:
Turn them off:
$(document).bind("mobileinit", function(){
$.mobile.defaultDialogTransition = "none";
$.mobile.defaultPageTransition = "none";
});
在jquery移动应用程序上使用fastclick可以加快单击事件的速度，从而加快页面转换的速度.点击事件最多可将300毫秒添加到页面过渡中.这个插件的作用远不止于此，但就您而言，就足够了.
Use fastclick on jquery mobile apps to speed click events thus speeding page transitions. Click events can add up to 300ms into page transition. This plugin will do much more then this but in your case it will be enough.
链接: https://github.com/drowne/jquery.mobile.fastclick
-
如果您不想使用其他插件，则仍然可以通过从页面更改按钮中删除href，然后执行以下操作来实现更快的页面转换:
In case you don't want additional plugins you can still achieve faster page transition by removing href from page changing buttons and then doing this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
如果您知道用户不会滚动，那么touchstart(或touchend)事件的效果很好.实际上，这就是单击事件在移动设备上花费很长时间才能解决的原因，该设备正在等待查看用户是否在滚动或单击.因此，touchstart不应像普通的click/tap事件那样具有延迟.
The touchstart (or touchend) event works great if you know the user won't be scrolling. That's actually the reason click events take so long to resolve on mobile devices, the device is waiting to see if the user is scrolling or clicking. So touchstart should not have a delay like common click/tap event.
我希望其中一些解决方案可以为您提供帮助.考虑到这些不是防弹解决方案，它们也有缺点.
这篇关于如何改善Jquery移动应用程序的页面过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
