Question

I’ve been experimenting with jQuery Mobile. I am trying to implement the following

• When a user clicks on an events navbar along the bottom they will proceed to view a list of events.
• This list is generated via an AJAX request from a server.
• Currently the page loads regardless of whether the list is available or not and then subsequently displays the information once it has finished loading. Untidy!!

I would like to display the jquery mobile loading popup until the page is ready and then continue.

In the jQueryMobile Docs and Demos under ‘list views’ and ‘list performance tests’ this performs as how i would like mine to.

I’ve tried binding to the ‘pagebeforeshow’ event but to no avail.

Any help would be greatly appreciated.

Answer 1

use this functions to hide and show loader and your own in java script

 //show loader
var showLoader = function () {   
        $('.ui-loader').css('display', 'block');
   }

 //hide loader
var hideLoader = function () {
            $('.ui-loader').css('display', 'none');
   }