Show loading message when loading an external page in a JQuery Mobile app
Question
Some background: I am using Jquery Mobile (1.4 stable) and Phonegap (3.3) to build an app. that I am currently testing on Android 2.3 (device) and Android 4.1.2 (emulator). I have a link in index.html that has a link to another page (say test.html also a JQM page). The test.html also resides inside the www folder of the app. but is quite a large html file 159 KB in size uncompressed. When the link is clicked in index.html , I wish to show a loading message until the test.html page (takes 2~3 seconds to load) is shown on screen. I do not want to load the test.html using ajax, so have mentioned data-ajax='false' on the link (because this causes problems for test.html ).
Methods I have tried to achieve this:
a) Listen to vclick on the <a> and used the technique mentioned in https://stackoverflow.com/a/16277865 to show the message. I didn't use event.preventDefault() so expected JQM to follow the link normally. Also tried simply $.mobile.loading('show') without using setInterval .
b) Listen to vclick on the <a> and used the technique mentioned https://stackoverflow.com/a/16277865 but this time set event.preventDefault() and used window.location.assign('test.html');
c) Created a <span> that just said loading, hid it using $('span selector').hide() on $(document).ready() and then listened to vclick on the <a> and did a $('span selector').show() to show the message.
RESULT of all 3 methods is the same. In Android 2.3 , upon click of the button to goto test.html the screen stays on the index.html for 2 ~ 3 seconds. No loading message is shown whether from JQM (a) and (b) or the simple (c) method. Strangely, I can see the message on a Desktop Chrome while debugging (put a breakpoint after the span is shown/$.mobile.loading is called) and see the message from both JQM and my hidden span. It only doesn't work on the actual device. I tried this also on Android 4.1.2 thinking this is a 2.3 peculiarity but here I see a blank white page for the 2 ~3 seconds before the test.html is shown.
I put a $(document).on on all the page related events in index.html but none of them fired (put alert messages in all listeners to test). pagebeforechange and pageshow fire only when returning back from another page to index.html , so I couldn't use pagebeforehide , pagehide which was my other alternative. Putting the load message in the test.html's page events is too late (tried this too) because those get fired only after the 2~3 seconds needed to load the page in the DOM.
Here is a sample index.html on which you can reproduce this issue in an Android device. I have linked to an external website here (that takes a few seconds to load) in lieu of the large test.html I have.
<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>
In summary, I have a link in index.html that leads to a large test.html that needs to be loaded using data-ajax=false. The test.html takes 2 ~3 seconds to load and I wish to show a loading message till the test.html is shown on screen.
Many thanks for any suggestions you can provide to solve this problem.
1 answers
solution1
1 2014-01-25 10:48:22
Another solution I found was to add a pause of 50 ms after the loading widget is called. The 50 ms timeout allowed it to show it before doing the redirect.
$('.Next').click(function(event) {
event.preventDefault();
$.mobile.loading('show');
setTimeout(function() {
window.location.assign('test.html');
}, 50);
});
This didn't require creating an intermediary html and is consistently showing the loading message on both A2.3 and A4.1.2.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.