如何改进我的 Jquery 移动应用程序的页面转换? [英] How can I improve the page transitions for my Jquery mobile app?
本文介绍了如何改进我的 Jquery 移动应用程序的页面转换?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在单个 HTML 页面中创建了一个小型的 Jquery Mobile 应用程序.我面临的问题是移动设备中页面转换的性能非常糟糕.在我滑动到下一页后，我最终在页面更改之前等待了 3-4 秒.有什么想法可以改进吗?
代码如下:
<头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>多页模板</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><身体><form id="test" method="post"><!-- 页面开始:#p01 --><div data-role="page" id="p01" data-theme="b" data-prefetch><div data-role="header" data-theme="a"><h1>第 01 页 of 05</h1></div><!--/header --><div data-role="内容" ><h3>请提供有关孩子的这些详细信息</h3><br/><字段集><label>孩子的全名:</label><字段集><input id = "p01_childFirstName_text" type="text" placeholder="名字..."><input id = "p01_childMidName_text" type="text" placeholder="中间名..."><input id = "p01_childLastName_text" type="text" placeholder="Last Name..."></fieldset></fieldset><br/><fieldset data-role="controlgroup" data-type="horizontal"><legend>孩子的性别:</legend><input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderMale_radio" value="choice-1" checked="checked"/><label for="p01_childGenderMale_radio">女性</label><input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderFemale_radio" value="choice-2"/><label for="p01_childGenderFemale_radio">男性</label><input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderOther_radio" value="choice-3"/><label for="p01_childGenderOther_radio">其他</label></fieldset><br/><字段集><label for = "p01_childEthnGroup_text">孩子的族群或种族:</label><input id = "p01_childEthnGroup_text" type="text" placeholder="Ethnic Group..."></fieldset><br/><字段集><label for="p01_childBirthDate_text">孩子的出生日期:</label><input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY"></fieldset><br/><字段集><label for="p01_childBirthDate_text">孩子的在校成绩:</label><input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY"></fieldset><br/><字段集><label for="flip-1">孩子在上学吗?</label><select name="flip-1" id="flip-1" data-role="slider" data-theme="a"><option value="off">是</option><option value="on">否</option></选择></fieldset></div><!--/content --><div data-role="footer" data-theme="a"><p class = "footer_text"><small><em>请将页面向两侧滑动以转到下一页，或返回到上一页.</em></small></p></div><!--/footer --></div><!--/第一页--><!-- 页面开始:#p02 --><div data-role="page" id="p02" data-theme="b" data-prefetch><div data-role="header" data-theme="a"><h1>第 02 页 of 05</h1></div><!--/header --><div data-role="content" data-theme="b"><h3>请提供有关孩子父母的这些详细信息</h3><p><small><em>即使父母现在没有工作，也请输入这些详细信息.具体 - 例如:汽车修理工、高中老师、家庭主妇、临时工、车床操作员、军士等.</em></small></p><br/><字段集><label for="p02_fatherWorkType_text">父亲的工作类型:</label><input id = "p02_fatherWorkType_text" type="text" placeholder="工作类型..."></fieldset><br/><字段集><label for="p02_motherWorkType_text">母亲的工作类型:</label><input id = "p02_motherWorkType_text" type="text" placeholder="工作类型..."></fieldset><br/><字段集><label>您的全名:</label><字段集><input id = "p02_userFirstName_text" type="text" placeholder="名字..."><input id = "p02_userMidName_text" type="text" placeholder="中间名..."><input id = "p02_userLastName_text" type="text" placeholder="Last Name..."></fieldset></fieldset><br/><fieldset data-role="controlgroup" data-type="horizontal"><legend>你的性别:</legend><input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderMale_radio" value="choice-1" checked="checked"/><label for="p02_userGenderMale_radio">女性</label><input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderFemale_radio" value="choice-2"/><label for="p02_userGenderFemale_radio">男性</label><input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderOther_radio" value="choice-3"/><label for="p02_userGenderOther_radio">其他</label></fieldset><br/><fieldset data-role="控制组"><legend>你与孩子的关系:</legend><input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationBio_radio" value="choice-1" checked="checked"/><label for="p02_userRelationBio_radio">生物父母</label><input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationAdopt_radio" value="choice-2"/><label for="p02_userRelationAdopt_radio">养父母</label><input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationStep_radio" value="choice-3"/><label for="p02_userRelationStep_radio">父级</label><input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationGrand_radio" value="choice-3"/><label for="p02_userRelationGrand_radio">祖父</label><input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationFoster_radio" value="choice-3"/><label for="p02_userRelationFoster_radio">寄养父母</label><input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationOther_radio" value="choice-3"/><label for="p02_userRelationOther_radio">其他(请指定)</label><input class="p02_input_hidden_text" id = "p02_userRelationOther_text" type="text" placeholder="指定关系..."></fieldset></div><!--/content --><div data-role="footer" data-theme="a"><p class = "footer_text"><small><em>请将页面向两侧滑动以转到下一页，或返回到上一页.</em></small></p></div><!--/footer --></div><!--/第二页--><!-- 页面开始:#p05 --><div data-role="page" id="p05" data-theme="b" data-prefetch><div data-role="header" data-theme="a"><h1>最后一页</h1></div><!--/header --><div data-role="content" data-theme="b"><h2>恭喜！您已填写儿童行为清单.</h2><p><small><em>请点击下面的提交"按钮将清单发送给我们.</em></small></p><br/><br/><br/><button type="submit" data-theme="a" class="ui-btn-hidden" data-disabled="false">提交</button></div><!--/content --></div><!--/第五页--></表单><风格>.footer_text {文字对齐:居中；}</风格><脚本>$( 文档 ).on( 'mobileinit', function(){$.mobile.loader.prototype.options.text = "加载中...";$.mobile.loader.prototype.options.textVisible = false;$.mobile.loader.prototype.options.theme = "a";$.mobile.loader.prototype.options.html = "";});$(document).on ('pageshow', function (e, data) {//将所有以前访问过的页面保留在 DOM 中.稍后当应用程序变大时删除此选项.$.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;});//使用滑动的页面导航$(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});});//显示和隐藏字段的代码.意大利面代码.在处理实际应用程序时重构它.$(document).ready(function() {$('[id=p02_userRelationOther_text]').hide()$('[type=radio]').click(function(eventName) {如果(this.id == 'p02_userRelationOther_radio'){$('[id=p02_userRelationOther_text]').show('慢')}别的 {$('[id=p02_userRelationOther_text]').hide('慢')}});$('[id=p03_noSports_check]').click(function(eventName) {if ($('[id=p03_noSports_check]').is(":checked")) {$('[class=p03_hidden_container]').hide('慢')}别的 {$('[class=p03_hidden_container]').show('慢')}});$('[id=p04_noHobby_check]').click(function(eventName) {if ($('[id=p04_noHobby_check]').is(":checked")) {$('[class=p04_hidden_container]').hide('慢')}别的 {$('[class=p04_hidden_container]').show('慢')}});});