頁面載入完成有兩種事件,一是ready,表示文件結構已經載入完成(不包含圖片等非文字媒體檔案),二是onload,指示頁 麵包含圖片等檔案在內的所有元素都載入完成。 (可以說:ready 在onload 前加載!!!)
一般樣式控制的,例如圖片大小控制放在onload 裡面加載;
jS事件觸發的方法,可以在ready 裡面加載;
用jQ的人很多人都是這麼開始寫腳本的:
通常的寫法
$(function(){
// do something
});
其實這個就是jq ready()的簡寫,他等價於:
$(document).ready(function( ){
//do something
})
也等於下面這個方法,jQuer的預設參數是:「document」;
$().ready(function(){
//do something
})
$(document).Ready()方法VS OnLoad事件VS $(window).load()方法
接觸JQuery一般最先學到的是何時啟動事件。在曾經很長一段時間裡,在頁面載入後引發的事件都被加載在”Body”的Onload事件裡.
對於Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
載入多個函數的問題
■
在Onload事件中只能這樣加載,很醜陋…
■而在JQuery中你可以利用多個JQuery.Ready()方法,它們會按次序依次執行
程式碼和內容不分離
這個貌似不用說了,讓人深惡痛絕-.-! !◦ 執行先後順序不同
■對於Body.Onload事件,是在加載完所有頁面內容才會觸發,我的意思是所有內容,包括圖片,flash等.如果頁面的這些內容很多會讓用戶等待很長時間.
■ 而對於$(document).ready()方法,這個方法只是在頁面所有的DOM加載完畢後就會觸發,無疑很大的加快了網頁的速度.
但是對於一些特殊應用,例如圖片的放大縮小,圖片的剪裁。需要網頁所有的內容載入完畢後才執行的呢?我建議使用$(window).load()方法,這個方法會等到頁面所有內容加載完畢後才會觸發,並且同時又沒有OnLoad事件的弊端.
上面的程式碼會在頁面所有內容載入完成後依先後順序依序執行.
當然不要忘了與之對應的Unload方法
上面程式碼會在頁面關閉時引發.
在所有DOM載入之前引發JS程式碼
這個方法是我在調試的時候最喜歡的,有時候開發的時候也用這種方法
對, 就是利用js閉包的形式將js程式碼嵌入body,這段程式碼會自動執行,當然也可以直接嵌入js程式碼,這種方式要注意順序問題,如下:
this is the content
this is the content div>
上面兩段程式碼, 第二段程式碼當中因為只能解釋到目前程式碼之前的DOM,而test並不存在於已經解析的DOM數.所以第二段程式碼無法正確顯示.