2012-05-08 36 views
1

我對jQuery Mobile的問題是如何在實際加載之前等待頁面完全加載(所有圖像,文本)。爲了澄清,一旦用戶點擊鏈接,加載圖形在頁面加載時停留在屏幕上,一旦完成加載,隱藏加載圖形並加載頁面。jQuery Mobile等待整個頁面完成加載

這可能嗎?

+0

這是可能的,但你必須通過監聽鏈接的單擊事件手動執行,手動檢索並追加頁面,解析它爲images/scripts/css,然後確認它們全部完成加載。 –

回答

2
$(document).on('click', '.my-custom-links', function() { 
    //get the requested page 
    $.ajax({ 
     url  : this.href, 
     success : function (page) { 
      //get only the first data-role="page" element 
      var $page = $(page).find('[data-role="page"]').first(); 

      //now bind an event handler to all the elements that will need to load 
      var $assets  = $page.find('img, script, link'), 
       assets_loaded = 0; 

      //make sure to bind to the load event before adding the element to the DOM 
      $assets.on('load', function() { 
       assets_loaded++; 
       if (assets_loaded == $assets.length) { 
        //all the assets have loaded, so navigate to the new page 
        $.mobile.changePage($page); 
       } 
      }); 

      //add new page to the DOM 
      $.mobile.pageContainer.append($page) 
     }, 
     error : function (jqXHR, textStatus, errorThrown) { /*Don't forget to handle errors*/ } 
    }); 
    return false; 
}); 

有一個第一個破解它。基本觀點與凱文B.所評論的並不遙遠。 Hi-jack點擊某些鏈接,抓住目標鏈接的頁面,將其添加到DOM,然後僅在資源加載完成後才顯示它。