2011-11-01 91 views
8

我需要的是什麼頁面加載之間的差異更詳細地瞭解,onload事件& $(文件)。就緒()

我找到答案,但這對我來說不是很清楚。 答案是當所有內容(例如圖像)也已經被裝載的HTML文件已被加載後像

發生ready事件,而onload事件後發生。

onload事件是DOM中的標準事件,而ready事件特定於jQuery。就緒事件的目的是在文檔加載後它應儘早發生,以便爲頁面中的元素添加funcionality的代碼不必等待所有內容加載。

想說的HTML文檔加載 和裝載類似圖像等所有頁面元素後onload事件發生之後發生的事件做好準備的人。

那麼什麼是HTML文件加載?我知道HTML文檔加載意味着所有頁面元素加載完成。

dom準備好還是裝入了什麼意思? HTML文檔加載& dom加載有什麼區別? 請讓我通過例子來理解。 謝謝

回答

11

我不知道你是什麼意思的pageLoad,但這裏的一些信息onload$(document).ready()

window.onload當頁面中的所有內容加載完成時觸發。這意味着不僅整個DOM被加載,而且諸如圖像的任何鏈接資源都被完全加載。因爲這會等待圖像完成加載,所以有時可能需要很長時間才能啓動window.onload。除非你真的需要等到圖像完成加載後,否則你通常不會等待這麼長的時間才能開始運行你的javascript來修改頁面或者掛接事件處理程序等等......

$(document).ready()是一個jQuery特有的只要DOM準備好進行操作就會觸發事件,但可能會在圖像加載完成之前很久。在頁面HTML中存在的所有對象都已被瀏覽器解析並初始化之後,並且頁面中的所有腳本已被加載後,都會發生這種情況。在此事件發生的時候,在所有瀏覽器中修改DOM是安全的。甚至可能在某些瀏覽器中稍早或稍後發生,因爲用於檢測DOM安全加載的機制在舊式瀏覽器和新式瀏覽器之間有所不同。

$(document).ready()的jQuery 1.6.x實現在DOM準備就緒時使用多種不同的檢測機制。首選的方法是在文檔對象上觸發DOMContentLoaded事件。但是,這個事件只有一些瀏覽器支持,所以它有其他瀏覽器的回退機制。

這兩個事件每頁僅觸發一次。

+0

pageLoad,AFAIK是類似於$(document).ready'的行爲的ASP快捷方式,但不一樣...但由於某些原因,它依賴於'setTimeout' - 這會使它非常不可靠,IMO。 – ZenMaster

+0

有些東西真的是錯誤的評論... – ZenMaster

+0

什麼是回退機制....這是什麼意思。另一個問題是什麼是DOM,以及在DOM準備好後我們可以做些什麼? PLzz解釋 –

0

讓我們打個比喻,比較加載網頁與配方廚師的過程:

首先,廚師(瀏覽器)讀取整個配方(下載HTML文件),以確保他了解步驟(HTML代碼),並且知道他需要在廚房(瀏覽器緩存)中使用哪些配料(圖像),器皿(樣式表)和設備(外部腳本)。

隨着廚師繼續閱讀,他會派他的助手到食品室去取食材,用具和器具(從服務器上下載其他文件)。當他完成閱讀食譜($(document).ready())時,他開始按照步驟(顯示頁面),但有時他會在助手返回之前到達一個步驟,並完成該步驟所需的材料。不過,他非常熟練,所以他仍然可以在等待時完成後面的步驟。 (這個比喻在這裏只有一點點打破了,但基本上是這樣的:瀏覽器根據HTML設置頁面,當你看到一個頁面加載,然後幾秒鐘後字體或佈局改變,因爲它終於得到了樣式表......想象一下,這位廚師可以以某種方式將蛋添加到已經在烤箱中的蛋糕中。)

只有在廚師的助手將食譜中標識的所有東西都帶回廚房後瀏覽器已經加載了所有內容),廚師可以將完成的食物放在盤子上並裝飾它(運行onload事件代碼)。


onload事件是在DOM標準的事件,而準備的事件是具體到jQuery的。

DOM是文檔對象模型,它是普通JavaScript的基本組件。這意味着所有現代Web瀏覽器已經知道什麼是onload

jQuery是一個廣泛使用的JavaScript庫。爲了讓您的腳本正確使用$(document).ready(),您必須鏈接到jQuery庫的副本。瀏覽器不知道什麼$(document).ready()沒有jQuery。