做項(xiàng)目的時(shí)候可能會(huì)遇到這種情況:
一個(gè)頁(yè)面的中定義了多個(gè)onload事件,那么在此定義window.onload函數(shù)的時(shí)候可能會(huì)不生效或者多個(gè)onload之間覆蓋的現(xiàn)象.
有的朋友肯定會(huì)說(shuō)用jQuery的$$(document).ready(function(){})(它的另外兩種寫(xiě)法:$(document).ready(function(){})和$(function(){}))的方式, 其實(shí)這個(gè)函數(shù)和javascript的onload事件是有區(qū)別的,那么來(lái)看看他們的區(qū)別:
他們的主要的區(qū)別有兩點(diǎn):
1.執(zhí)行時(shí)機(jī)
window.onload方法是在網(wǎng)頁(yè)中的所有的元素(包括元素的所有關(guān)聯(lián)文件)都完全加載到瀏覽器之后才執(zhí)行。而通過(guò)jQuery中的$(document).ready()方法注冊(cè)的事件處理程序,只要在DOM完全就緒時(shí),就可以調(diào)用了,比如一張圖片只要標(biāo)簽完成,不用等這個(gè)圖片加載完成,就可以設(shè)置圖片的寬高的屬性或樣式等。
2.$(document).ready()方法可以多次使用而注冊(cè)不同的事件處理程序,而window.onload一次只能保存對(duì)一個(gè)函數(shù)的引用,多次綁定函數(shù)只會(huì)覆蓋前面的函數(shù)。
先來(lái)看window.onload方法在一個(gè)頁(yè)面上注冊(cè)兩次會(huì)是什么樣的結(jié)果:
1.function one(){ 2. alert("one"); 3.} 4.function two(){ 5. alert("two"); 6.} 7.window.onload = two ; 8.window.onload = one ;
上面的代碼運(yùn)行后,會(huì)彈出“one”。
再來(lái)看看$(document).ready()方法分兩次調(diào)用會(huì)是什么結(jié)果。
1.function one(){ 2. alert("one"); 3.} 4.function two(){ 5. alert("two"); 6.} 7.$(document).ready(function(){ 8. one(); 9.}); 10.$(document).ready(function(){ 11. two(); 12.});
上面的代碼運(yùn)行后,會(huì)分別彈出“one”和“two”。
那如果既要頁(yè)面完全加載完后執(zhí)行,而且要可以執(zhí)行多次,這樣上面的兩個(gè)方法就都不能滿(mǎn)足了,所以有了下面的實(shí)現(xiàn):
1. var loadFunc = function(func){ 2. if (document.addEventListener) { 3. window.addEventListener("load", func, false); 4. } 5. else if (document.attachEvent) { 6. window.attachEvent("onload", func); 7. } 8. } 9. 10. loadFunc(function(){ 11. alert(1); 12. }) 13. loadFunc(function(){ 14. alert(2); 15. })
loadFunc(function(){…});想加幾個(gè)就幾個(gè),所以上面的結(jié)果是先彈出1再?gòu)棾?。
聯(lián)系客服