在JQuery Mobile應用程序中加載外部頁面時顯示加載消息

一些背景：我正在使用Jquery Mobile（1.4穩定版）和Phonegap（3.3）構建應用程序。我目前正在測試Android 2.3（設備）和Android 4.1.2（模擬器）。我在index.html中有一個鏈接，指向另一個頁面的鏈接（也就是test.html也是一個JQM頁面）。 test.html也位於應用程序的www文件夾中。但相當大的HTML文件大小爲159 KB，未壓縮。在index.html中點擊鏈接時，我希望顯示一個加載消息，直到屏幕上顯示test.html頁面（需要加載2〜3秒）。我不想使用ajax加載test.html，所以在鏈接上提到data-ajax='false'（因爲這會導致test.html出現問題）。在JQuery Mobile應用程序中加載外部頁面時顯示加載消息

方法我都試過來實現這一目標：

一）聽vclick對<a>和使用https://stackoverflow.com/a/16277865提到的技術來顯示信息。我沒有使用event.preventDefault()，因此JQM期望通常能夠遵循鏈接。也嘗試簡單$.mobile.loading('show')而不使用setInterval。

二）聽vclick對<a>和使用的技術提到https://stackoverflow.com/a/16277865但這次設置event.preventDefault()和使用window.location.assign('test.html');

C）創建一個<span>，只是說加載，使用上$(document).ready()$('span selector').hide()隱藏它，然後聽取了vclick,<a>，並做了$('span selector').show()來顯示該消息。

所有3種方法的結果是相同的。在Android 2.3中，點擊按鈕轉到test.html，屏幕停留在index.html上2到3秒。無論從JQM（a）和（b）還是簡單（c）方法都不顯示加載消息。奇怪的是，我可以在調試時在桌面版Chrome上看到這條消息（顯示span後顯示一個斷點/ $。mobile.loading被調用），並查看來自JQM和我的隱藏範圍的消息。它只適用於實際的設備。我也在Android 4.1.2上試過這個，認爲這是一個2.3的特性，但在這裏我看到一個空白頁面，顯示test.html之前的2〜3秒。

我把$(document).on放在index.html的所有頁面相關事件上，但沒有一個被解僱（把警報信息放在所有聽衆測試中）。 pagebeforechange和pageshow僅當從另一頁返回到index.html時纔會觸發，因此我無法使用pagebeforehide，pagehide這是我的另一種選擇。將加載消息放入test.html的頁面事件中已經太晚了（也試過了），因爲只有在DOM中加載頁面所需的2〜3秒之後纔會觸發這些消息。

以下是您可以在Android設備中重現此問題的示例index.html。我已經鏈接到這裏的一個外部網站（需要幾秒鐘才能加載）來代替我所擁有的大型test.html。

<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" />   
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 
    <title>Hello World</title> 
    </head> 
<body> 
    <div data-role="page" data-url="index.html" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 263px;"> 

     <div data-role="header" role="banner" class="ui-header ui-bar-inherit"> 
      <h1 class="ui-title" role="heading" aria-level="1">Homepage</h1> 
     </div> 

     <div data-role="content" class="ui-content" role="main"> 
       <a href="http://www.foogifts.com" data-role="button" data-ajax="false" class="Next ui-link ui-btn ui-shadow ui-corner-all" role="button">Click here to test</a> 
      <span id="loading">Loading please wait...</span> 
     </div> 

     <div data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit"> 
      <h4 class="ui-title" role="heading" aria-level="1">Footer here</h4>     
     </div> 
    </div> 
    <script> 
    $(document).ready(function(){ 
     $("#loading").hide(); 
     $(".Next").on("vclick",function(event){      
      event.preventDefault(); 
      //$.mobile.loading('show');   
      $("#loading").show();    
      var topage = event.currentTarget.href;   
      window.location.assign(topage);   
     }); 
    }); 
    </script> 
</body> 
</html>

總之，我有index.html中導致大的test.html需要使用數據AJAX =假被裝載的鏈接。 test.html需要2〜3秒才能加載，我希望顯示一個加載消息，直到test.html顯示在屏幕上。

非常感謝您提供解決此問題的任何建議。

來源

2014-01-24 coltrane

因爲ajax = false，所以在index.html中顯示加載消息將不起作用。即使頁面仍然可見幾秒鐘，但實際上在加載新頁面時已消失。你可以'重做'text.html，使它加載消息大部分空白，然後異步呈現頁面？ – ezanker

謝謝ezanker。這是我的第一個jqm/jquery項目，所以我不太清楚如何去做你所建議的。你的意思是我創建了一箇中間html，它只是顯示一個加載消息，然後ajax加載其中的第一個jqm頁面從我的test.html（它包含幾個jqm頁面）？ – coltrane

一個快速和骯髒的方法可能是讓一箇中間人有一個立即重定向到test.html的加載消息。我沒有意識到test.html有多個jQM頁面，我以爲你可以通過加載消息加載大多爲空的test.html，然後立即通過ajax調用添加html標記。 – ezanker

我發現的另一個解決方案是在加載小部件被調用後添加50 ms的暫停。 50 ms超時允許它在重定向之前顯示它。

$('.Next').click(function(event) {    
      event.preventDefault(); 
      $.mobile.loading('show');  
      setTimeout(function() {  
       window.location.assign('test.html'); 
      }, 50); 
    });

這並不需要創建中介html，並始終在A2.3和A4.1.2上顯示加載消息。

來源

2014-01-25 10:48:22 coltrane

在JQuery Mobile應用程序中加載外部頁面時顯示加載消息

回答

相關問題