我正在構建一個豐富的圖像和交互元素的Web應用程序。由於這些原因，我只是想顯示的頁面，一旦所有圖像加載：jQuery手機顯示加載程序的自定義加載過程？

$(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(); 
    } 
});

我需要到任何一個）徹底清除裝載機和我自己的替換它，或者b）已經裝載機熬夜，直到以上功能完成。

如何卸下裝載機或將其保持不用？

來源

2013-05-02 styke

通常你可以叫'$ .mobile.loading（ '隱藏'）;'和'$ .mobile.loading（ '秀'）;' – m90 2013-05-02 11:04:30

你試過$ .mobile.loading（'隱藏「）; ？ – PrasadW 2013-05-02 11:04:58

@ m90試過了，不行！ – styke 2013-05-02 11:08:20

jQuery Mobile的定製加載

解決方案：

工作的jsfiddle：http://jsfiddle.net/Gajotres/vdgB5/

Mobileinit事件必須jQuery Mobile的前初始化初始化和jQuery後。此外，還需要對css進行一些其他更改才能使其工作。

首先，我們需要覆蓋默認的ui-loader-default類，因爲它的不透明度很低，最終的微調器很難看清。改變不透明度值，你想要什麼。

.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; 
}

這裏有一個工作示例：

代碼示例

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>

jQuery Mobile的AJAX加載程序的編程執行

某些瀏覽器，包括WebKit的瀏覽器，如Chrome瀏覽器有jQuery Mobile ajax的程序化執行裝載機。它們可以使用serinterval手動執行，如下所示：

$(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);  
});

來源

2013-05-02 11:11:14 Gajotres

使用此代碼，我可以點擊背頁，有沒有任何選項，不允許加載時點擊頁面上。 – 2014-04-30 06:08:09

不是100％確定你正在嘗試做什麼。在本文檔中有一些事情你可以用裝載機做：

http://api.jquerymobile.com/page-loading

至於其他一些人所說的，你可以使裝載機出現/手動調用它消失。

$.mobile.loading("show"); 

$.mobile.loading("hide");

來源

2013-05-02 11:08:52 asgeo1

我在引導時使用的一種技術是將第一個data-role =「page」div用作加載屏幕。在引導後，我使用changePage以編程方式轉換到主頁：

$.mobile.changePage("#home" , { reverse: false, changeHash: false });

這是一個小提琴。
http://jsfiddle.net/puleos/Esf7H/

來源

2013-05-02 11:18:23

jQuery手機顯示加載程序的自定義加載過程？

回答

jQuery Mobile的AJAX加載程序的編程執行

相關問題