css - jQuery mobile show loader for custom loading process? -
i'm building web application rich in images , interactive elements. these reasons want display page once images 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 either a) remove loader , replace own, or b) have loader stay until above function finishes.
how either remove loader or keep until not needed?
jquery mobile custom loader
solution:
working jsfiddle: http://jsfiddle.net/gajotres/vdgb5/
mobileinit event must initialized before jquery mobile initialized , after jquery. additional changes css must done work.
first of all, need override default ui-loader-default class because opacity low , final spinner hard see. change opacity value how ever want.
.ui-loader-default { opacity: 1 !important; } and our spinner.
.custom-spinner { width: 37px !important; height: 37px !important; background-image:url('http://pictures.reuters.com/clientfiles/rtr/images/ajax-loader.gif'); display: block; } here's working example:
code example
html:
<!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> programmatic execution of jquery mobile ajax loader
some browsers, including webkit browser chrome have programmatic execution of jquery mobile ajax loader. can executed manually serinterval, this:
$(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); });
Comments
Post a Comment