首先明確一下頁面加載的步驟:jquery
一、下載解析HTML文檔結構瀏覽器
二、加載外部腳本文件與樣式表文件緩存
三、解析並執行腳本代碼服務器
四、構造HTML DOM模型框架
5 、加載圖片等外部文件函數
六、頁面加載完畢 佈局
接下來,咱們分別介紹一下三者:性能
load()方法:url
load()方法總共有兩種,分別是 jquery的load()方法和jquery Ajax的load()方法。spa
如何區別兩個方法在於參數的不一樣。
jQuery:
當指定的元素(及子元素)已加載時,會發生 load() 事件。
該事件適用於任何帶有 URL 的元素(好比圖像、腳本、框架、內聯框架)。
根據不一樣的瀏覽器(Firefox 和 IE),若是圖像已被緩存,則也許不會觸發 load 事件。
語法:
$(selector).load(function)
jQuery Ajax:
經過 AJAX 請求從服務器加載數據,並把返回的數據放置到指定的元素中。
語法:
load(url,data,function(response,status,xhr))
load事件必須等到網頁中全部內容所有加載完畢以後才被執行。即上述的第六步完成後再運行函數。若是一個網頁中有大量的圖片的話,則就會出現這種狀況:網頁文檔已經呈現出來,但因爲網頁數據尚未徹底加載完畢,致使load事件不可以即時被觸發。因此當咱們要加載一個特別大的圖片時,若是沒有在圖片標籤就限制了圖片的大小,而是在load內設置圖片大小,就會形成圖片先把頁面撐開,等到圖片所有加載完畢後再改變其大小的問題。這樣以來,用戶體驗就會很是的差。
ready()方法:
ready()方法在上述第4步完成後運行,即DOM結構繪製完成以後就繪執行。這樣能確保就算有大量的媒體文件沒加載出來,JS代碼同樣能夠執行。
語法:
$(document).ready(function)
$().ready(function)
$(function)
上面三種寫法效果是同樣的,後兩種寫法是第一種寫法的簡寫方式。
因而,上述特別大圖片的加載狀況最好就是把圖片的設置放到ready()方法中來,這樣等到開始加載圖片時,就已經給圖片設置了大小,這樣就不會形成圖片把頁面撐開而破壞頁面佈局的狀況發生了。
onload()事件:
前二者爲jQuery的方法,而onload()是js的一個事件,就如同onclick()事件同樣。
onload 事件會在頁面或圖像加載完成後當即發生。
語法:
onload="SomeJavascriptCode"
這樣就能夠看出來三者的區別了,load()和ready()是jQuery的方法,onload()是js的一個事件。
若是文檔中沒有相關聯的圖片等媒體文件的話,使用load()和使用ready()性能上沒有多大的區別,不過若是存在,則使用ready()會避免不少麻煩。
還有load()方法只有一個起做用,即當你運行多個load()方法時,只有最後一個起做用,而ready()方法則能夠同時運行多個,這也是ready()方法相對於load()方法的優點之處。
因此在須要使用這一方法時,儘可能使用ready()方法。
至於onload()事件,則如同onclick()、onmouseover()等事件同樣,使用方法也沒有區別。這就是onload()和load()的區別,看起來彷佛同樣,不過倒是徹底不一樣的二者。