如何改进Jquery移动应用程序的页面转换？
我在一个HTML页面中创建了一个小型的Jquery Mobile应用程序。 我面临的问题是移动设备中页面转换的性能是可怕的。 在我滑到下一页后，我最终会等待3-4秒，因为页面会发生变化。 我有什么想法可以改进吗？
这是代码：
Multi-page template .footer_text { text-align:center; } $( 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') } }); }); 有几种方法：
-
如果你正在使用！ 具有多个页面的html文件，将它们包装成单个div：
并设置此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-of-jquery-mobile-transitions-in-phonegap-apps/
- 其他常见的解决方案是设置此css：.ui-page {-webkit-backface-visibility：hidden; }
该解决方案的问题在于它打破了表单上的选择列表。
-
把它们关掉：
$(document).bind("mobileinit", function(){ $.mobile.defaultDialogTransition = "none"; $.mobile.defaultPageTransition = "none"; }); -
使用jquery移动应用程序快速点击可加快点击事件，从而加快页面转换速度。 点击事件最多可以向页面转换添加300毫秒。 这个插件会做更多的事情，但在你的情况下，它就足够了。
链接： https ： //github.com/drowne/jquery.mobile.fastclick
-
如果您不想要其他插件，您仍然可以通过从页面更改按钮中删除href然后执行以下操作来实现更快的页面转换：
Back $('#back-btn').bind('touchstart', function(e) { $.mobile.changePage("#pageID"); });
如果您知道用户不会滚动，touchstart（或touchend）事件会很有效。 这实际上是点击事件在移动设备上需要很长时间才能解决的原因，设备正在等待用户是否正在滚动或点击。 所以touchstart不应该像常见的点击/点击事件那样有延迟。
我希望这些解决方案能为您提供帮助。 考虑到，这些不是防弹解决方案，它们有自己的缺点。
至于全局css性能修复，请尝试使用JQM CSS生存工具包 ，这是一个用于修复特定性能问题的小型css工具。
谢谢Gajotres。
我用vclick替换了“touchstart”并添加了preventDefault（），否则我最终会遇到很多pagechangefailed事件。
Back ... // Fastclick on back button - gets rid of the 300ms delay $("#bhome").live('vclick', function(e) { e.preventDefault(); javascript:history.back(1);// $.mobile.changePage("#home", {transition:'fade'}); });
在开发过程中，我认为添加以下事件处理程序以确保不会发生错误是一件好事：
$(document).bind("pagechangefailed", function(event, data) { $.mobile.loading('hide'); alert("pagechangefailed"); });