在JQuery Mobile应用程序中加载外部页面时显示加载消息
一些背景：我正在使用Jquery Mobile（1.4稳定版）和Phonegap（3.3版）构建一个应用程序。我目前正在Android 2.3（设备）和Android 4.1.2（模拟器）上测试。我在索引中有一个链接。html有一个指向另一个页面的链接（比如说，test.html也是一个JQM页面）。<代码>测试。html也位于应用程序的www文件夹中。但它是一个相当大的html文件，大小为159 KB，未经压缩。在索引中单击链接时。html，我希望在测试之前显示加载消息。html页面（加载需要2-3秒）显示在屏幕上。我不想加载测试。html使用ajax，因此在链接中提到了数据ajax='false'（因为这会导致test.html出现问题）。
我试图实现这一点的方法：
a） 收听
b） 收听
c） 创建了<代码>
所有3种方法的结果都是相同的。在Android 2.3中，单击按钮转到测试。html屏幕保持在索引上。html 2～3秒。无论是来自JQM（a）和（b）还是简单（c）方法，都不会显示加载消息。奇怪的是，我在调试时可以在桌面Chrome上看到消息（在显示span后放置一个断点/$。调用mobile.load），并且可以看到来自JQM和我隐藏的span的消息。它只在实际设备上不起作用。我在Android 4.1.2上也尝试过这个，认为这是2.3的一个特点，但在这里，我在测试前的2到3秒看到了一个空白的白色页面。显示html。
我放了一个<代码>$（文档）。在索引中的所有页面相关事件上。html，但没有任何一个被激发（将警报消息放在所有侦听器中进行测试）pagebeforechange和pageshow只有在从另一页返回到索引时才会触发。html，所以我无法使用另一种替代方法，即pagebeforehide。将负载消息放入测试中。html的页面事件太晚了（也尝试过了），因为只有在DOM中加载页面所需的2到3秒后才会触发这些事件。
这是一个示例索引。可以在Android设备上复制此问题的html。我在这里链接了一个外部网站（加载需要几秒钟），以代替大型测试。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>
总之，我在索引中有一个链接。导致大型测试的html。需要使用数据ajax=false加载的html。测试。html加载需要2到3秒，我希望在测试之前显示一条加载消息。html显示在屏幕上。
非常感谢您为解决此问题提供的任何建议。
共有1个答案
我发现的另一个解决方案是在调用加载小部件后添加50 ms的暂停。50 ms超时允许它在进行重定向之前显示它。
$('.Next').click(function(event) {
event.preventDefault();
$.mobile.loading('show');
setTimeout(function() {
window.location.assign('test.html');
}, 50);
});
这不需要创建中间html，并且始终在A2.3和A4.1.2上显示加载消息。
-
我的场景如下： 我有一个部署到servlet容器的webapp.war。此webapp.war在web-inf/lib中包含以下库： lib_a.jar lib_b.jar 我还有一个库，比如lib_vendor.jar，由于许可问题，我无法在webapp/web-inf/lib中部署，所以我让客户在应用程序安装后在tomcat/lib中复制这个库。但是由于lib_vendor.jar需要在web
-
问题内容： 我尝试在我的网站中实施AJAX。单击div changepass的内容时，则应加载changepass.template.php。这是我为此使用的代码。 我的问题是在页面changepass.template.php完全加载时如何显示GIF动画（loading.gif）。请给我一些代码提示。 问题答案： 有很多方法可以做到这一点。一种简单的方法： JS： 詹姆斯·怀斯曼 （ James
-
我正在尝试在我的多租户应用程序中实现假客户概念。我有两个微服务。在其中一个微服务中，我编写了从数据库获取数据的API。我需要在我的其他微服务中使用这些数据。为此，我使用了假客户概念。我需要第二个微服务加载期间的数据。但这并没有发生。我有以下错误 这是我的基于数据源的MultitenantConnectionProviderImpl。类，我在其中编写了伪客户机逻辑 这是一个虚拟客户端。我将第二个微服
-
我的jsp中有一个这样的tr。 我也有这样的选择。 select中使用的javascript函数如下所示。 因此，如果所选行不是0，我将不会在页面中显示tr。这很好用 我在请求中设置了dateRange变量。setAttribute（）并从操作发送它 问题是从请求值中正确地选择了选项，但是没有显示tr 我尝试在jsp中的表单外部这样运行它，希望它能在页面加载之前执行，但没有发生。 有什么想法吗？
-
问题内容： 我的网站上有一个版块，在进行一些密集的通话时加载速度很慢。 知道如何div在页面准备时显示类似于“加载”的内容，然后在一切准备就绪时消失吗？ 问题答案： 我需要这个，经过一番研究，我想到了这个（需要jQuery）： 首先，在标签之后添加以下代码： 然后将div和图片的样式类添加到CSS： 然后，将此JavaScript添加到您的页面中（当然，最好在页面结尾处，在结束
-
问题内容： 我想向用户显示一个加载图标，直到页面元素完全加载为止。如何使用javascript做到这一点，而我想使用javascript而不是jquery做到这一点？ 这是一个链接，谷歌是怎么做到的？在onload事件或类似事件上触发某些功能..我知道它会以这种方式或任何其他方式完成？还是有一些事件吗？ 更新 我使用显示属性做了一些操作，我隐藏了body元素，但是body标签的onload更改了它