js中的window.onload和jquery中的load区别的讲解
生活随笔
收集整理的這篇文章主要介紹了
js中的window.onload和jquery中的load区别的讲解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript?中的以下代碼?
[javascript] view plaincopyprint? Window.onload?=?function?(){??????//?編寫代碼?}?? Window.onload = function (){ // 編寫代碼 }? $(window).load(function?(){????????//?編寫代碼??});??
$(window).load(function (){ // 編寫代碼 });?
等價于??
Jquery?代碼如下:? [javascript] view plaincopyprint?
| window.load | $(document).ready() | |
| 執行時機 | 必須等待網頁中所有的內容加載完畢后?(?包括圖片?)?才能執行 | 網頁中所有?DOM?結構繪制完畢后就執行,可以能?DOM?元素關聯的內容并沒有加載完 |
| 編寫個數 | 不能同時編寫多個 以下代碼無法正確執行: window.onload = function(){ alert(“text1”); }; window.onload = function(){ alert(“text2”); }; 結果只輸出第二個 | 能同時編寫多個 以下代碼正確執行: $(document).ready(function(){ alert(“Hello World”); }); $(document).ready(function(){ alert(“Hello again”); }); 結果兩次都輸出 |
| 簡化寫法 | 無 | $(function(){ // do something }); |
以?瀏覽器裝載文檔為例,在頁面加載完畢后,瀏覽器會通過?Javascript?為?DOM?元素添加事件。在常規的?Javascript?代碼中,通常使用?window.onload?方法,而在?Jquery?中,使用的是$(document).ready()?方法。?$(document).ready()?方法是事件模塊中最重要一個函數,可以極大的提高Web?應用程序的速度。
?
另外,需要注意一點,由于在?$(document).ready()?方法內注冊的事件,只要?DOM?就緒就會被執行,因此可能此時元素的關聯文件未下載完。
例如與圖片有關的?html?下載完畢,并且已經解析為?DOM?樹了,但很有可能圖片還沒有加載完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用?Jquery?中另一個關于頁面加載的方法?---load()?方法。
?Load()?方法會在元素的onload?事件中綁定一個處理函數。
如果處理函數綁定給?window?對象,則會在所有內容?(?包括窗口、框架、對象和圖像等?)?加載完畢后觸發,如果處理函數綁定在元素上,則會在元素的內容加載完畢后觸發。
?
總結: js:?window.onload頁面一運行就執行該函數,執行該函數時,可能頁面中的圖片還沒有加載完成! jquery:?$(window).load()頁面中的圖片或其它東西加載完成之后,執行該函數。 與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的js中的window.onload和jquery中的load区别的讲解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 吃不胖还还好吃的东西是什么?
- 下一篇: 安化腊肉是哪里的