Creating a custom loader with jQuery Mobile
Solution Found:
To implement a custom loader with jQuery Mobile, you can refer to this working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/
The key is to initialize the Mobileinit event before jQuery Mobile is loaded and after jQuery is loaded. Additionally, some CSS changes need to be made for the custom loader to function properly.
Firstly, override the default ui-loader-default class by adjusting the opacity value to improve visibility of the spinner:
.ui-loader-default {
opacity: 1 !important;
}
Next, define the custom spinner style:
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
display: block;
}
Here is an example demonstrating how to implement the custom loader:
HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-loader-default {
opacity: 1 !important;
}
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
opacity: 1 !important;
display: block;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$.mobile.loading( 'show');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Advanced Usage: Programmatic Control of jQuery Mobile AJAX Loader
Some browsers have the ability to programmatically control the jQuery mobile AJAX loader. For instance, WebKit browsers like Chrome allow manual execution using setInterval as shown below:
$(document).on('pagebeforecreate', '#index', function(){
var interval = setInterval(function(){
$.mobile.loading('show');
clearInterval(interval);
},1);
});
$(document).on('pageshow', '#index', function(){
var interval = setInterval(function(){
$.mobile.loading('hide');
clearInterval(interval);
},1);
});