jQuery移動web開發(fā)中的頁面初始化與加載事件

更新時間：2015年12月03日 16:04:49 投稿：goldensun

這篇文章主要介紹了jQuery移動web開發(fā)中的頁面初始化與加載事件,是JavaScript移動端頁面開發(fā)學習中的基礎知識,需要的朋友可以參考下

頁面初始化事件(pagebeforecreate、pagecreate)
Jquery Mobile會自動基于page"內的增強的約定自動初始化一些插件。例如：給一個input輸入框約定了type=range屬性會自動生成一個自定義滑動條。這些自動初始化的行為是受"page"插件控制的，它在執(zhí)行前后部署部署事件，允許你在初始化前后操作頁面，或者甚至自己提供初始化行為，禁止自動初始化。注以下的頁面初始化事件在每個“page”只被觸發(fā)一次，與每次頁面在顯示或者隱藏的show/hide事件剛剛相反。

pagebeforecreate：頁面初始化時，初始化之前觸。

pagecreate：頁面初始化時，初始化之后觸。

$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by Jquery Mobile!');
});

注意：通過綁定pagebeforecreate然后return false，你禁止頁面插件自己的操作。而且，務必在 Jquery Mobile 執(zhí)行前綁定這些函數，以使他們在初始化頁面加載時被調用。在 mobileinit 事件的處理函數中使用它們既可。

頁面加載事件(pagebeforeload、pageload)
當外部的頁面加載到dom中時，有兩個事件被觸發(fā)。第一個是 pagebeforeload，第二個是pageload ，或者pageloadfailed。

pagebeforeload

在加載請求發(fā)出之前觸發(fā)，綁定到這個事件的回調函數可以可以對該事件調用preventDefault()，來表明由他們來處理加載的請求。這樣的做的話回調函數必須對通過數據對象傳到回調函數的對象調用resolve()或者reject()。通過第二個參數傳到回調函數的對象包含如下的屬性：

url (字符串)：通過回調傳到$.mobile.loadPage()的絕對或者相對地址
absUrl (字符串)：url的絕對地址版本。
dataUrl (字符串)：絕對地址的當識別頁面或者更新瀏覽器地址的時候使用的絕對地址經過過濾的版本
deferred (對象)：針對此事件調用preventDefault()的回調函數必須針對此事件調用
resolve()或者reject()方法，使得changePage()的請求恢復。

例如:

$( document ).bind( "pagebeforeload", function( event, data ){
 //讓jqm框架知道由我們來處理load事件.
 event.preventDefault();
 //...加載文檔然后插入到DOM中
 //在這個回調中，或者通過其他的異步加載手段中，
 //調用resolve,轉入到下面的參數中，加上一個
 //包含有頁面dom元素的jquery選擇器。
 data.deferred.resolve( data.absUrl, data.options, page );
});

pageload

在頁面已成功加載并插入到DOM后觸發(fā)。綁定到這個事件的回調函數會被作為一個數據對象作為第二個參數。這個對象包含如下的信息：