文章/答案/技术大牛

发布

社区首页 >问答首页 >如何改善Jquery移动应用的页面过渡效果？

问如何改善Jquery移动应用的页面过渡效果？
EN

Stack Overflow用户

提问于 2012-12-21 15:44:13

回答 3查看 14.4K关注 0票数 6

我在一个HTML页面中创建了一个很小的Jquery Mobile应用程序。我面临的问题是，移动设备中页面转换的性能非常糟糕。在我滑动转到下一页后，我最终等待了3-4秒，然后页面才会发生变化。你知道我该怎么改进它吗？

代码如下：

<!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>

jquery

jquery-mobile

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-12-21 16:05:24

有几种方法：

，以防您正在使用！包含多个页面的

文件，将它们包装到单个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；}

该解决方案的问题在于它破坏了表单上的Select列表。

将它们关闭：

$(document).bind("mobileinit"，function(){ $.mobile.defaultDialogTransition = "none"；$.mobile.defaultPageTransition = "none"；})；

在jquery移动应用上使用快速单击来加速点击事件，从而加速页面转换。点击事件最多可以在页面过渡中添加300ms。这个插件可以做更多的事情，但是在你的例子中它已经足够了。

链接：https://github.com/drowne/jquery.mobile.fastclick

如果你不想要额外的插件，你仍然可以通过删除页面切换按钮中的href，然后这样做来实现更快的页面过渡：

返回$('# Back -btn').bind('touchstart'，.bind(E){ $.mobile.changePage("#pageID")；});

如果您知道用户不会滚动，那么touchstart (或touchend)事件非常有用。这实际上是为什么点击事件在移动设备上需要这么长时间才能解决的原因，设备正在等待查看用户是在滚动还是在点击。所以touchstart不应该像常见的点击/点击事件那样有延迟。

我希望其中的一些解决方案能对你有所帮助。考虑到，这些都不是无懈可击的解决方案，它们也有自己的缺点。

票数 11

Stack Overflow用户

发布于 2013-02-26 08:51:18

至于全局css性能修复，请尝试JQM CSS survival kit，这是一个用于修复特定性能问题的小css工具。

票数 0

Stack Overflow用户

发布于 2013-06-09 18:02:11

谢谢你Gajotres。

我已经用vclick替换了"touchstart“，并添加了preventDefault()，否则我最终得到了相当多的页面更改事件。

<div data-role="page" id="event" data-theme="b" style="background: transparent;">
  <div data-role="header" data-theme='b' data-position='fixed'>
    <a class="ui-btn-left" data-icon="arrow-l" id="bhome" href="#">Back</a>
...

// 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"); 
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13986182

复制

相似问题

问如何改善Jquery移动应用的页面过渡效果？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改善Jquery移动应用的页面过渡效果？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改善Jquery移动应用的页面过渡效果？
EN