Question

在DreamweaverCS6中构建jQuery Mobile应用程序。有一个带有多个链接的ul调用html页面，每个都持有一个测验。 “测验”页面是一个jqm页面，其中包含一个javascript文件，用于完成测验的所有工作。一切正常，但当你点击li测验按钮加载页面时，加载需要一些时间，并且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>

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

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

Answer 2

您拥有代码的方式，这些链接将完全刷新，abd不显示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>

希望你明白这一点......

jQuery Mobile ajax加载微调器无法正常工作

2 个答案: