Question

我在切换页面时遇到了性能问题。我去了各种论坛并添加了类似faskclick等内容。

第一次，当我切换到不同的页面时，大约需要3-4秒，但从第二次开始，它很快，例如1 - 1.5秒现在，有时，点击不起作用。在5次点击中，只有2-3次点击有效。我正在努力弄清楚出了什么问题？

如果您可以帮我找出为什么点击不起作用以及如何在使用jquery mobile时提高性能，那将非常有用。以下是我的代码片段

<html>
<!-- head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />

<title>Project</title>

<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />

<script src="StyleSheet/jquery-1.8.2.min.js"></script>
<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>

<script src="StyleSheet/fastclick.js"></script>

<script type="application/javascript">

                $.mobile.defaultPageTransition = 'none';
                $.mobile.transitionFallbacks.slideout = 'none';

            window.addEventListener('load', function() {
                new FastClick(document.body);
            }, false);

            $( document ).bind( "mobileinit", function() {
                 $.mobile.buttonMarkup.hoverDelay = 500
            });

       </script>

</head>

<body>
    <div id="container">
        <div data-role="page" id="HomePage" class="jqm-demos">
            <div class="ui-body ui-body-b">
                <a href="#SecondPage">CLick Me to go second page</a>
            </div>
        </div>
        <div data-role="page" id="SecondPage" class="jqm-demos">
            <div class="ui-body ui-body-b">
                <br> <a href="#HomePage">CLick Me to go first page</a>
                <div id="JQM" data-theme="b" data-content-theme="c"
                    data-role="collapsible" data-collapsed-icon="arrow-d"
                    data-expanded-icon="arrow-u">
                    <h3>
                        <span style="float: left;"> JQM is very slow </span> <a
                            href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span
                            style="float: right;"
                            class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>
                        </a>
                    </h3>
                    <p>I sther any way so that page transition should happen just
                        like native applciation when using JQM ? Botton click also also
                        sometimes not responsive.</p>
                </div>
            </div>
            <!-- content -->

            <!-- footer -->
            <div data-role="footer" data-theme="b" data-tap-toggle="false"
                data-position="fixed">
                <!--class="ui-bar ui-bar-b"-->
                <a href="#" data-rel="back" data-role="button" data-icon="arrow-l"
                    data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>
                <center>
                    <a href="#HomePage" data-role="button" data-icon="home"
                        data-iconpos="notext" data-theme="b">Home</a>
                </center>
                <a href="#" data-role="button" data-icon="arrow-r"
                    data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>
            </div>
            <!-- /footer -->
        </div>
    </div>
</body>
</html>

使用jquery mobile在页面之间切换时性能很差

0 个答案: