JS頁面加載完畢後執行的多種方式和比較

做項目的時候可能會遇到這種情況:

一個頁面的中定義了多個onload事件,那麼在此定義window.onload函數的時候可能會不生效或者多個onload之間覆蓋的現象.
　　有的朋友肯定會說用jQuery的$$(document).ready(function(){})(它的另外兩種寫法：$(document).ready(function(){})和$(function(){}))的方式, 其實這個函數和javascript的onload事件是有區別的,那麼來看看他們的區別:

他們的主要的區別有兩點：
1.執行時機
window.onload方法是在網頁中的所有的元素（包括元素的所有關聯文件）都完全加載到瀏覽器之後才執行。而通過jQuery中的$(document).ready()方法註冊的事件處理程序，只要在DOM完全就緒時，就可以調用了，比如一張圖片只要<img>標籤完成，不用等這個圖片加載完成，就可以設置圖片的寬高的屬性或樣式等。 2.$(document).ready()方法可以多次使用而註冊不同的事件處理程序，而window.onload一次只能保存對一個函數的引用，多次綁定函數只會覆蓋前面的函數。
先來看window.onload方法在一個頁面上註冊兩次會是什麼樣的結果：

1.function one(){  
2.    alert("one");  
3.}  
4.function two(){  
5.    alert("two");  
6.}  
7.window.onload = two ;  
8.window.onload = one ; 

上面的代碼運行後，會彈出“one”。
再來看看$(document).ready()方法分兩次調用會是什麼結果。

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.});  

上面的代碼運行後，會分別彈出“one”和“two”。
那如果既要頁面完全加載完後執行，而且要可以執行多次,這樣上面的兩個方法就都不能滿足了，所以有了下面的實現:

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(){…});想加幾個就幾個，所以上面的結果是先彈出1再彈出2。