文檔準備好顯示加載器

如何在文檔準備就緒顯示加載器。上面的代碼沒有做任何事情。文檔準備好顯示加載器

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

來源

2013-08-20 user2632980

請提供一些更詳細 –

這可能會幫助你！ JS FIddle Help

JavaScript代碼

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

}); 

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

});

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'); 
        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>

來源

2013-08-20 09:10:52

HTML

<div id="spinner" style="display: none;"> 
<span id="ss" style="float: left; margin-left: 50% !Important; margin-top: 22% !Important;"> 
<img src="ajax-pink-loader.gif" alt="Loading..." /> 
</span> 
</div> 
<asp:Button ID="ssubmit" runat="server" Text="Search" OnClick="submit_Click1" />

JQUERY

$("#ssubmit").click(function() { 
$("#spinner").show(); 
setInterval(function() { 
$("#spinner").hide(); 
}, 20000); 
});

CSS

<style type="text/css"> 
     #spinner 
     { 
      background: rgb(0, 0, 0); 
      background: rgba(0, 0, 0, .5) !important; 
      filter: alpha(opacity=60) !important; /* IE */ 
      -moz-opacity: 0.6 !important; /* Mozilla */ 
      opacity: 0.6 !important; /* CSS3 */ 
      top: 0; 
      left: 0; 
      position: fixed; 
      height: 100% !important; 
      width: 100% !important; 
      _height: expression(document.body.offsetHeight + "px"); 
      z-index: 9999; 
     } 
    </style>

來源

2013-08-20 09:11:15 Sasidharan

文檔準備好顯示加載器

回答

相關問題