I'm building a web application that is rich in images and interactive elements. For these reasons I only want to display the page once all images are loaded:
$(document).on('pageinit', function(){
$('.ui-content').hide();
var imgs = $(".ui-content img").not(function() { return this.complete; });
var count = imgs.length;
if (count) {
imgs.load(function() {
count--;
if (!count) {
$(".ui-content").show()
}
});
} else {
$(".ui-content").show();
}
});
I need to either a) remove the loader completely and replace it with my own, or b) have the loader stay up until the above function finishes.
How do I either remove the loader or keep it up until not needed?
Best Answer
jQuery Mobile custom loader
Solution:
Working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/
Mobileinit
event must be initialized before jQuery Mobile is initialized and after jQuery. Also some additional changes to css must be done for this to work.First of all, we need to override default
ui-loader-default
class because its opacity is to low and final spinner is hard to see. Change opacity value how ever you want.And this is our spinner.
Here's a working example:
Code example
HTML:
Programmatic execution of jQuery mobile ajax loader
Some browsers, including webkit browser like Chrome have a programmatic execution of jQuery mobile ajax loader. They can be executed manually with serinterval, like this: