0

在 DreamweaverCS6 中构建 jQuery Mobile 应用程序。有一个带有多个链接的 ul 调用 html 页面，每个页面都有一个测验。“测验”页面是一个 jqm 页面，其中包含一个 javascript 文件，用于完成测验的所有工作。一切正常，但是当您单击 li quiz 按钮加载页面时，加载需要一点时间，并且 ajax 加载微调器未显示。这是一个问题，因为您不知道应用程序是否已冻结。关于如何在加载页面时强制微调器显示的任何想法？

 <div data-role="content">  

    <ul data-role="listview">


    <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Quizzes</li>
            <li><a href="quiz1.html">Quiz 1</a></li>
            <li><a href="quiz2.html">Quiz 2</a></li>
            <li><a href="quiz3.html">Quiz 3</a></li>
4

2 回答 2

1

您可以使用

$.mobile.showPageLoadingMsg();

和

$.mobile.hidePageLoadingMsg();

您可以参考http://jquerymobile.com/demos/1.2.1/docs/config/loadingMessageTextVisible.html以正确使用。

您可以通过在特定的 div 标签中实际写入每个页面的内容来降低页面加载速度，例如：

<div data-role="page" id="quiz1"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
</div>

您可以将此页面加载为：

<ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Quizzes</li>
        <li><a href="#quiz1">Quiz 1</a></li>
        <li><a href="#quiz2">Quiz 2</a></li>
        <li><a href="#quiz3">Quiz 3</a></li>
</ul>

这将大大减少页面加载时间并加快您的应用程序。

于 2013-04-30T08:24:48.403 回答
0

您拥有代码的方式，这些链接将完全刷新，但不会显示 jqm 微调器。

您可以做的是以编程方式更改页面，该页面使用 jqm 微调器来转换页面。更多信息http://jquerymobile.com/demos/1.2.1/docs/api/methods.html - changePage ($.mobile.changePage())

这个想法是拥有你的

  • 如下：

    <li><a class="quiz1">Quiz 1<a><li>
<script>
    $(document).on('pageinit', '.quiz1', function() {
        $.mobile.changePage('quiz1.html');
    });
</script>

    希望你明白...

    • 于 2013-08-07T15:11:14.087 回答