2014-06-18 38 views
1

我在jQuery Mobile應用程序中導航到外部html頁面。頁面需要一段時間裝載我要顯示在平均時間裝載機但它在這裏..不工作就是我曾嘗試..當rel =「external」時顯示頁面加載器

$(document).ajaxStart(function() { 
     // $.mobile.loading('show'); 
     $.mobile.loading("show", { 
        text: 'Please Wait!', 
        textVisible: 'true', 
        theme: "b", 
        textonly: 'true', 
        html: '' 
      }); 

     }); 

     $(document).ajaxStop(function() { 
      $.mobile.loading('hide'); 
     }); 

我知道的rel =「外部」禁用AJAX,有沒有什麼辦法我可以顯示這個裝載機打開外部鏈接..?

+0

,因爲頁面是不是通過Ajax加載這是不可能並且DOM被替換爲新頁面的DOM。 – Omar

+0

@Omar:是否有任何傳統的方式通過純JS實現呢?我只需要顯示一個請稍候標籤..多數民衆贊成它... –

+0

隱藏頁面之前顯示加載器的唯一方法是延遲顯示下一頁。 – Omar

回答

1

當你移動到一個外部頁面使用Ajax殘疾人,裝載機不顯示,因爲DOM擦拭,並與外部頁面的內容所取代。

唯一可能的方式來顯示裝載機之前導航是延遲通過setTimeout()移動到該頁面。

HTML

<a href="http://www.*****.com" rel="external" class="ui-btn external">External Page</a> 

JS

$(document).on("pagecreate", "#pageID", function() { 
    $(".external").on("click", function (e) { 
     e.preventDefault(); 
     var url = $(this).attr("href"); 
     $.mobile.loading("show", { 
      text: "redirecting...", 
      textVisible: true 
     }); 
     setTimeout(function() { 
      location.href = url; 
     }, 2000); // 2secs delay 
    }); 
}); 

Demo - Code