jquery - 如何改进 Jquery 移动应用程序的页面转换？-6ren

jquery - 如何改进 Jquery 移动应用程序的页面转换？

转载作者：行者123 更新时间：2023-12-03 22:47:11

我在单个 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>

最佳答案

有几种方法:

如果您正在使用!具有多个页面的 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-页面{ -webkit-backface-visibility:隐藏； }

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

关闭它们:

$(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不应该像普通的click/tap事件那样有延迟。

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

关于jquery - 如何改进 Jquery 移动应用程序的页面转换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13986182/

文章推荐： Jquery 对 future 元素不起作用？

文章推荐： python - 如何理解 Python 中的 sys.stdout 和 sys.stderr

文章推荐： haskell - 主函数提示返回一个非 IO 单子(monad)

文章推荐： jquery - 服务器响应状态为 405(不允许方法)

c++ - 将迭代器存储到字符串中(转换、转换、追加？)
我正在尝试将一个字符串逐个字符地复制到另一个字符串中。目的不是复制整个字符串，而是复制其中的一部分(我稍后会为此做一些条件......) 但我不知道如何使用迭代器。你能帮帮我吗？ std::stri
C++:转换/转换 void 指针到结构引用
我想将 void 指针转换为结构引用。结构的最小示例: #include "Interface.h" class Foo { public: Foo() : mAddress((uint
javascript - 为什么一个元素从窗口的左上角开始它的 css3 转换/转换？
这有点烦人:我有一个 div，它从窗口的左上角开始过渡，即使它位于文档的其他任何位置。我试过 usign -webkit-transform-origin 但没有成功，也许我用错了。有人可以帮助我吗？
html - 有什么方法可以检测 CSS3 转换/转换/动画的过程状态？
假设，如果将 CSS3 转换/转换/动画分配给 DOM 元素，我是否可以检测到该过程的状态？我想这样做的原因是因为我正在寻找类似过渡链的东西，例如，在前一个过渡之后运行一个过渡。最佳答案我在 h
CSS 转换/转换 - 谷歌浏览器中的 "shaky"图像
最近我遇到了“不稳定”屏幕，这很可能是由 CSS 转换引起的。事实上，它只发生在 Chrome 浏览器上(可能还有 Safari，因为一些人也报告了它)。知道如何让它看起来光滑吗？此外，您可能会注意
jquery - CSS3 转换(转换)在 Firefox 中不起作用，但在 Chrome 和 Safari 中起作用
我正在开发一个简单的 slider ，它使用 CSS 过渡来为幻灯片设置动画。我用一些基本样式和一些 javascript 创建了一支笔 here .注意:由于 Codepen 使用 Prefixfr
Linq 转换
我正在使用以下代码返回 IList: public IList FindCodesByCountry(string country) { var query =
转换、计算的RESTful设计
如何设计像这样的操作: 计算转化翻译例如:从“EUR”转换为“CNY”金额“100”。这是 /convert?from=EUR&to=CNY&amount=100 RESTful 吗？最佳答
Jquery 转换
我使用 jquery 组合了一个图像滚动器，如下所示 function rotateImages(whichHolder, start) { var images = $('#' +which
CSS 转换
如何使用 CSS (-moz-transform) 更改一个如下所示的 div: 最佳答案你可以看看Mozilla Developer Center .甚至还有例子。但是，在我看来，您的具体示例不
CSS 转换
我需要帮助我正在尝试在选中和未选中的汉堡菜单上实现动画。我能够为菜单设置动画，但我不知道如何在转换为 0 时为左菜单动画设置动画 &__menu { transform: translateX(
swift :转换
我正在为字典格式之间的转换而苦苦挣扎:我正在尝试将下面的项目数组转换为下面的结果数组。本质上是通过在项目第一个元素中查找重复项，然后仅在第一个参数不同时才将文件添加到结果集中。 var items:[
具有相同布局的不同类型之间的C++转换
如果我有两个定义相同的结构，那么在它们之间进行转换的最佳方式是什么？ struct A { int i; float f; }; struct B { int i; float f; }; void
Javascript 转换
我编写了一个 javascript 代码，可以将视口(viewport)从一个链接滑动到另一个链接。基本上一切正常，你怎么能在那里看到http://jsfiddle.net/DruwJ/8/ 我现在的
meteorjs 图像上传/转换
我需要将文件上传到 meteor ，对其进行一些图像处理(必要时进行图像转换，从图像生成缩略图)，然后将其存储在外部图像存储服务器(s3)中。这应该尽可能快。您对 nodejs 图像处理库有什么建议
KDB+，转换，左操作数
刚开始接触KDB+，有一些问题很难从Q for Mortals中得到。说，这里 http://code.kx.com/wiki/JB:QforMortals2/casting_and_enumera
JSF float 转换
我在这里的一个项目中使用 JSF 1.2 和 IceFaces 1.8。我有一个页面，它基本上是一大堆浮点数字段的大编辑网格。这是通过 inputText 实现的页面上的字段指向具有原始值的值对象
SceneKit 转换 ScnMatrix4
ScnMatrix4 是一个 4x4 矩阵。我的问题是什么矩阵行对应于位置(ScnVector3)，旋转(ScnVector4)，比例(ScnVector3)。第 4 行是空的吗？编辑: 我玩弄了
Scala map 转换
恐怕我是 Scala 新手: 我正在尝试根据一些简单的逻辑将 Map 转换为新 Map: val postVals = Map("test" -> "testing1", "test2" -> "te
基于配置文件的 XSLT 转换
输入: This is sample 1 This is sample 2 输出: ~COLOR~[Green]This is sample 1~COLOR~[Red]This is sam

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 如何改进 Jquery 移动应用程序的页面转换？