js中的window.onload和jquery中的load区别的讲解
等價(jià)于??
Jquery?代碼如下:? [javascript] view plaincopyprint?
| window.load | $(document).ready() | |
| 執(zhí)行時(shí)機(jī) | 必須等待網(wǎng)頁(yè)中所有的內(nèi)容加載完畢后?(?包括圖片?)?才能執(zhí)行 | 網(wǎng)頁(yè)中所有?DOM?結(jié)構(gòu)繪制完畢后就執(zhí)行,可以能?DOM?元素關(guān)聯(lián)的內(nèi)容并沒有加載完 |
| 編寫個(gè)數(shù) | 不能同時(shí)編寫多個(gè) 以下代碼無(wú)法正確執(zhí)行: window.onload = function(){ alert(“text1”); }; window.onload = function(){ alert(“text2”); }; 結(jié)果只輸出第二個(gè) | 能同時(shí)編寫多個(gè) 以下代碼正確執(zhí)行: $(document).ready(function(){ alert(“Hello World”); }); $(document).ready(function(){ alert(“Hello again”); }); 結(jié)果兩次都輸出 |
| 簡(jiǎn)化寫法 | 無(wú) | $(function(){ // do something }); |
以?瀏覽器裝載文檔為例,在頁(yè)面加載完畢后,瀏覽器會(huì)通過(guò)?Javascript?為?DOM?元素添加事件。在常規(guī)的?Javascript?代碼中,通常使用?window.onload?方法,而在?Jquery?中,使用的是$(document).ready()?方法。?$(document).ready()?方法是事件模塊中最重要一個(gè)函數(shù),可以極大的提高Web?應(yīng)用程序的速度。
?
另外,需要注意一點(diǎn),由于在?$(document).ready()?方法內(nèi)注冊(cè)的事件,只要?DOM?就緒就會(huì)被執(zhí)行,因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。
例如與圖片有關(guān)的?html?下載完畢,并且已經(jīng)解析為?DOM?樹了,但很有可能圖片還沒有加載完畢,所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問(wèn)題,可以使用?Jquery?中另一個(gè)關(guān)于頁(yè)面加載的方法?---load()?方法。
?Load()?方法會(huì)在元素的onload?事件中綁定一個(gè)處理函數(shù)。
如果處理函數(shù)綁定給?window?對(duì)象,則會(huì)在所有內(nèi)容?(?包括窗口、框架、對(duì)象和圖像等?)?加載完畢后觸發(fā),如果處理函數(shù)綁定在元素上,則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)。
?
總結(jié): js:?window.onload頁(yè)面一運(yùn)行就執(zhí)行該函數(shù),執(zhí)行該函數(shù)時(shí),可能頁(yè)面中的圖片還沒有加載完成! jquery:?$(window).load()頁(yè)面中的圖片或其它東西加載完成之后,執(zhí)行該函數(shù)。 與50位技術(shù)專家面對(duì)面20年技術(shù)見證,附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的js中的window.onload和jquery中的load区别的讲解的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 吃不胖还还好吃的东西是什么?
- 下一篇: java信息管理系统总结_java实现科