2013-05-13 134 views
5

我想显示的页面加载小部件直到页面加载完毕后,它应该隐藏...并做这个过程中,每次我冲任何锚传送到下一个页面..不会隐藏加载器,直到页面完全加载到jQuery的移动

支持,我有三个网页...

<div data-role="page" id="home">....</div> 
<div data-role="page" id="about">....</div> 
<div data-role="page" id="contact">....</div> 

脚本这个我使用: -

$(document).on("pagecreate", function(event) { 
    //alert("Take It Show"); 
    $(".ui-loader").loading("hide"); 
}); 

是否有可能将data-transition="slide"等转换添加到任何锚点或在其中使用data-ajax="false" ......?

回答

9

工作例如:http://jsfiddle.net/Gajotres/Zr7Gf/

基本上从底部JavaScript是你所需要的。

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" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></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>  
    <div data-role="page" id="second"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
      <a href="#index" class="ui-btn-left">Back</a> 
     </div> 

     <div data-role="content"> 

     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div>  
</body> 
</html> 

的Javascript:

$(document).on('pagebeforecreate', '[data-role="page"]', function(){  
    var interval = setInterval(function(){ 
     $.mobile.loading('show'); 
     clearInterval(interval); 
    },1);  
}); 

$(document).on('pageshow', '[data-role="page"]', function(){ 
    var interval = setInterval(function(){ 
     $.mobile.loading('hide'); 
     clearInterval(interval); 
    },300);  
}); 
+2

很好的回答,感谢您的... – SaurabhLP 2013-05-13 11:04:55

+0

我看到你的代码是从不同[jsfiddle.net/Gajotres/Zr7Gf ](http://jsfiddle.net/Gajotres/Zr7Gf/) – ggDeGreat 2015-10-01 04:18:57

相关问题