jquery mobile - Show loader on document ready -


how show loader on document ready. code above not anything.

$(document).bind("pageinit", function() {    $.mobile.loading("show");              }); 

this might out! js fiddle help

javascript code

$(document).on('pagebeforeshow', '#index', function(){         });  $(document).on('pagebeforeshow', '#second', function(){         }); 

html code

<!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');                     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 = "<div class='custom-spinner'></div>";                 });              </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>    

Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -