CODEWITHSUNDEEP
jqueryjquery-mobile
srinik
srinik

Reputation: 144

How to show page loading spinner in jquery mobile

I am trying to show page loading spinner using below code in jquery mobile 1.3 Android native app, but it is not working, can any one help me what the issue is and how to make it work

</head>
  <body>
    <div id="createPage" data-role="page">
   <script>
    $("#createPage").on("pageshow", function(event, ui) {
    $mobile.loading('show');
    processCreateBtnAction(); //This takes 5 seconds to complete the operation
    $.mobile.loading('hide');
});
</script>
 <div data-role="header" data-position="fixed"></div>

Upvotes: 0

Views: 11335

Answers (3)

asgeo1
asgeo1

Reputation: 9078

The other answers are good. I personally use a slightly different varition of the same basic technique - create a large enough break in the Javascript processing, that the UI will have enough time to redraw itself.

$("#createPage").on("pageshow", function(event, ui) {
    $.mobile.loading('show');
    setTimeout(function(){
        processCreateBtnAction(); //This takes 5 seconds to complete the operation
        $.mobile.loading('hide');
    }, 20);
});

This will create a 20 millisecond timeout after 'show' is called. Which is enough time for the UI to redraw itself before the CPU heavy processCreateBtnAction() function is called.

I've experimented with different timings, and have found that 20 milliseconds is the best timeout to use. Some people try to use 0 or something like that - which will work on faster devices. But on an iPad 1 or something like that which is quite slow, you need to have a decent timeout, or you won't get enough time for the screen to redraw.

Upvotes: 5

dejavu
dejavu

Reputation: 3254

Try this in place of $mobile.loading('show');:

var interval = setInterval(function () {
        $.mobile.loading('show');
        clearInterval(interval);
    }, 1);

Upvotes: 0

Kyri Elia
Kyri Elia

Reputation: 1007

Javascript is slightly different to other programming languages as it will not wait for the actions within the function processCreateBtnAction() to complete before moving onto the next line - which is why your spinner is being hidden.

One way around this is to use callback functions (as in Javascript, functions can be passed around as objects). Something along the lines of:

$("#createPage").on("pageshow", function(event, ui) {
    $mobile.loading('show');
    processCreateBtnAction($.mobile.loading('hide'));
});

function processCreateBtnAction(callback) {
    // Rest of your function here

    callback(); // $.mobile.loading('hide') will be called here.
}

Upvotes: 0

Related Questions