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

3 回答 3

11

有几种方法：

  • 如果您正在使用 ! 包含多个页面的 html 文件，将它们包装到单个 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-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 移动应用程序上使用 fastclick 来加速点击事件，从而加快页面转换。点击事件最多可以添加 300 毫秒到页面转换。这个插件会做更多的事情，但在你的情况下就足够了。

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

  • 如果您不想要其他插件，您仍然可以通过从页面更改按钮中删除 href 然后执行以下操作来实现更快的页面转换：

    <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 不应该像常见的点击/点击事件那样有延迟。

我希望其中一些解决方案对您有所帮助。考虑到，这些不是万无一失的解决方案，它们也有自己的缺点。

于 2012-12-21T08:05:23.897 回答
0

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

于 2013-02-26T00:51:18.090 回答
0

谢谢加约特雷斯。

我已经用 vclick 替换了“touchstart”并添加了 preventDefault()，否则我最终会遇到很多 pagechangefailed 事件。

<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"); 
});
于 2013-06-09T10:02:11.337 回答