在 JQuery Mobile 应用程序中加载外部页面时显示加载消息答案

【问题标题】：Show loading message when loading an external page in a JQuery Mobile app在 JQuery Mobile 应用程序中加载外部页面时显示加载消息
【发布时间】：2014-01-24 15:04:54
【问题描述】：

一些背景：我正在使用 Jquery Mobile (1.4 stable) 和 Phonegap (3.3) 来构建一个应用程序。我目前正在 Android 2.3（设备）和 Android 4.1.2（模拟器）上进行测试。我在index.html 中有一个链接，该链接指向另一个页面（比如test.html 也是一个JQM 页面）。 test.html 也位于应用程序的 www 文件夹中。但它是一个相当大的 html 文件，未压缩大小为 159 KB。当在index.html 中单击链接时，我希望显示一条加载消息，直到屏幕上显示test.html 页面（需要2~3 秒才能加载）。我不想使用 ajax 加载test.html，所以在链接上提到了data-ajax='false'（因为这会导致test.html 出现问题）。

我尝试过的方法：

a) 在<a> 上收听vclick 并使用https://stackoverflow.com/a/16277865 中提到的技术来显示消息。我没有使用event.preventDefault()，所以希望 JQM 能够正常访问该链接。还尝试了简单的$.mobile.loading('show') 而不使用setInterval。

b) 在<a> 上收听vclick 并使用提到的技术https://stackoverflow.com/a/16277865 但这次设置event.preventDefault() 并使用window.location.assign('test.html');

c) 创建了一个 <span> 刚刚表示正在加载，在 $(document).ready() 上使用 $('span selector').hide() 隐藏它，然后在 <a> 上收听 vclick 并执行 $('span selector').show() 以显示消息。

所有 3 种方法的结果是相同的。在 Android 2.3 中，单击 goto test.html 按钮后，屏幕会在 index.html 上停留 2 ~ 3 秒。无论是来自 JQM (a) 和 (b) 还是简单的 (c) 方法，都不会显示加载消息。奇怪的是，我可以在调试时在桌面 Chrome 上看到该消息（在显示跨度后放置一个断点/调用 $.mobile.loading）并查看来自 JQM 和我的隐藏跨度的消息。它仅在实际设备上不起作用。我也在 Android 4.1.2 上尝试过，认为这是 2.3 的特性，但在这里我看到在显示 test.html 之前的 2 ~3 秒有一个空白白页。

我在index.html 中的所有页面相关事件上都添加了$(document).on，但没有一个事件被触发（在所有侦听器中放置警报消息以进行测试）。 pagebeforechange 和 pageshow 仅在从另一个页面返回到 index.html 时触发，所以我不能使用 pagebeforehide、pagehide 这是我的另一个选择。将加载消息放在 test.html 的页面事件中为时已晚（也尝试过），因为只有在 DOM 中加载页面所需的 2~3 秒后才会触发这些事件。

这是一个示例 index.html，您可以在其中在 Android 设备上重现此问题。我在这里链接到一个外部网站（加载需要几秒钟），而不是我拥有的大型 test.html。

    <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />        
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <title>Hello World</title>
    </head>
<body>
    <div data-role="page" data-url="index.html" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 263px;">

        <div data-role="header" role="banner" class="ui-header ui-bar-inherit">
            <h1 class="ui-title" role="heading" aria-level="1">Homepage</h1>
        </div>

        <div data-role="content" class="ui-content" role="main">
                <a href="http://www.foogifts.com" data-role="button" data-ajax="false" class="Next ui-link ui-btn ui-shadow ui-corner-all" role="button">Click here to test</a>
            <span id="loading">Loading please wait...</span>
        </div>

        <div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit">
            <h4 class="ui-title" role="heading" aria-level="1">Footer here</h4>                
        </div>
    </div>
    <script>
    $(document).ready(function(){   
        $("#loading").hide();
        $(".Next").on( "vclick",function(event){                    
            event.preventDefault(); 
            //$.mobile.loading('show');         
            $("#loading").show();               
            var topage = event.currentTarget.href;          
            window.location.assign(topage);         
        });
    });
    </script>
</body>
</html>

总之，我在 index.html 中有一个链接，它指向一个需要使用 data-ajax=false 加载的大型 test.html。 test.html 需要 2 到 3 秒才能加载，我希望显示加载消息，直到 test.html 显示在屏幕上。

非常感谢您提供解决此问题的任何建议。

【问题讨论】：

因为 ajax=false，在 index.html 中显示加载消息不起作用。尽管页面仍然可见几秒钟，但在加载新页面时它实际上已经消失了。您能否“重做”text.html，使其在加载消息中加载大部分空白，然后异步呈现页面？
感谢ezanker。这是我的第一个 jqm/jquery 项目，所以我不太确定如何去做你所建议的事情。你的意思是我创建了一个中间 html，它只显示一个加载消息，然后 ajax 加载第一个 jqm 页面来自我的 test.html（其中包含几个 jqm 页面）？
一种快速而肮脏的方法可能是让中间人立即重定向到 test.html 的加载消息。我没有意识到 test.html 有多个 jQM 页面，我在想你可以加载 test.html 大部分为空的加载消息，然后立即通过 ajax 调用添加 html 标记。
试过了。现在的问题是“加载”页面在历史记录中，所以它出现在后退导航中。
中间页面绝对是一个 hack，但您可以尝试从该页面中尝试 location.replace(url) 以使其不被历史记录：w3schools.com/jsref/met_loc_replace.asp

标签： android jquery-mobile cordova

【解决方案1】：

我发现的另一个解决方案是在调用加载小部件后添加 50 毫秒的暂停。 50 毫秒的超时允许它在重定向之前显示它。

    $('.Next').click(function(event) {              
            event.preventDefault();
            $.mobile.loading('show');       
            setTimeout(function() {     
                window.location.assign('test.html');
            }, 50);
    });

这不需要创建中间 html，并且始终在 A2.3 和 A4.1.2 上显示加载消息。

【讨论】：