$(document).ready() 和 window.onload 的区别
參考資料:
http://blog.csdn.net/lcc921528642/article/details/48379431
http://www.cnblogs.com/jiajia123/p/6107748.html
http://www.cnblogs.com/Chen-XiaoJun/articles/5829876.html
說實話,一直還沒完全清楚以下幾個 JS 區別:
$(window).load() 與 $(document).ready() 以及$(document).ready() 與 window.onload 。
剛網上搜了下資料,先整理下。
1、執行時間上的區別:
window.onload 必須等到頁面內(包括圖片的)所有元素加載到瀏覽器中后才能執行。而 $(document).ready(function(){}) 是DOM結構加載完畢后就會執行。
2、編寫個數不同:
window.onload 不能同時寫多個,如果有多個window.onload,則只有最后一個會執行,它會把前面的都覆蓋掉。$(document).ready(function(){}) 則不同,它可以編寫多個,并且每一個都會執行。
3、簡寫方法:
window.onload 沒有簡寫的方法,$(document).ready(function(){}) 可以簡寫為 $(function(){})。
另外:由于在 $(document).ready() 方法內注冊的事件,只要DOM就緒就會被執行,因此可能此時元素的關聯文件未下載完,例如與圖片有關的HTML下載完畢,并且已經解析為DOM樹了,但很有可能圖片還未加載完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。
要解決這個問題,可以使用JQuery中另一個關于頁面加載的方法 — load() 方法。load() 方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定在元素上,則會在元素的內容加載完畢后觸發。如:$(window).load(function(){})=====window.onload = function(){}…
詳細內容見:
http://www.php100.com/html/program/jquery/2013/0905/5954.html
總結來說
JavaScript中的:
window.onload = function(){ alert(“text1”); };等同于JQuery中
$(window).load(function(){alert("text1"); });他們都是用于當頁面的所有元素,包括外部引用文件,圖片等都加載完畢時運行函數內的alert函數。load方法只能執行一次,如果在js文件里寫了多個,只能執行最后一個。(初學者常常在頁面結構里對元素直接寫行為函數,這樣是很丑陋的,可以用選擇器等,在js代碼里對元素進行行為控制。)
在jquery中
$(document).ready(function(){alert("text2"); });等同于(簡化寫法)
$(function(){alert("text2"); });他們都是用于當頁面的標準DOM元素被解析成DOM樹后就執行內alert函數。這個函數是可以在js文件里多次編寫的,對于多人共同編寫的js就有很大的優勢,因為所有行為函數都會執行到。而 $(document).ready() 函數在HMTL結構加載完后就可以執行,不需要等大型文件加載或者不存在的連接等耗時工作完成才執行,效率高。
當然 也要根據項目需求來使用,比如有時候有些時候圖片或者重要信息沒出來,會對用戶操作產生誤導,或者需要等獲取某些圖片高寬數據后再執行的行為函數,就得使用window.onload了。
總結
以上是生活随笔為你收集整理的$(document).ready() 和 window.onload 的区别的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: eclipse项目红叉,Target r
- 下一篇: 我还在坚持的道路上