jquery mobile 入門5 (預加載與緩存頁面)
五. 預加載與緩存頁面
1. 預加載頁面
在開發移動應用程序時, 對需要鏈接的頁面進行預加載是十分必要的。因爲當一個鏈接的頁面設置成預加載方式時,在當前頁面加載完成後,目標頁面也被自動加載到當前文檔中,用戶單擊就可以馬上打開,大大加快了頁面訪問的速度。
預加載方式1:
通過給需要預加載的外聯標籤添加 data-prefetch="true" 屬性。
實例代碼:
........
<div data-role="main">
<!--當該頁面加載完成後,將會自動預加載 設置了屬性 “data-prefetch=true” 的標籤指定的外部頁面到該文檔中-->
<a href="新頁面.html" data-prefetch="true">點擊我講打開在本頁面中已已預加載的 “新頁面.html” 內容</a>
</div>
預加載方式2:
通過調用javascript 代碼中的全局方法 $.mobile.loadPage()來預加載指定的目標HTML頁面。 其最終效果與預加載方式1 一樣。
實例:
$(document).on("pagecreate",function(){
$.mobile.loadPage("新頁面.html");
})
2. 頁面緩存
在jQuery mobile 中,可以通過頁面緩存的方式將訪問過的歷史內容寫入頁面文檔的緩存中;當用戶重新訪問時,不需要重新加載,只要充緩存中讀取就可以。
設置頁面緩存方式1:
通過給 “page” 容器的 “data-dom-cache” 屬性,將對應容器中的全部內容寫入緩存中。
代碼實例
<div data-role="page" data-dom-cache="true">
............................
</div>
設置頁面緩存方式2:
通過 javascript 設置 代碼: $.mobile.page.prototype.options.domCache = ture . 可以將當前文檔寫入緩存。
注: 使用頁面緩存的功能將會使DOM內容變大,可能導致某些瀏覽器打開的速度變得緩慢。因此,一旦選擇了開啓緩存功能,就要管理好緩存的內容,並做到及時清理。