Question

一些背景：我使用Jquery Mobile（1.4稳定版）和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）听取vclick上的<a>并使用https://stackoverflow.com/a/16277865中提到的技术来显示消息。我没有使用event.preventDefault()所以期望JQM正常关注链接。在不使用$.mobile.loading('show')的情况下，也尝试了setInterval。

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

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

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

我在$(document).on中的所有页面相关事件上放了一个index.html，但没有一个被触发（将警报消息放在所有侦听器中进行测试）。 pagebeforechange和pageshow仅在从其他网页返回index.html时才会触发，因此我无法使用pagebeforehide，pagehide这是我的另一种选择。将load消息放在test.html的页面事件中为时已晚（也尝试过这样做），因为只有在DOM中加载页面所需的2~3秒后才会触发它们。

以下是您可以在Android设备上重现此问题的示例index.html。我在这里链接到一个外部网站（需要几秒钟加载）来代替我的大型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显示在屏幕上。

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

Answer 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上显示加载消息。

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

1 个答案: