1. 程式人生 > >jQuery中ready和load的區別

jQuery中ready和load的區別

  1. ready方法
            $(document).ready(function(){  
                    ...code...  
            })  
            //document ready 簡寫  
            $(function(){  
                    ...code...  
            })
  2. load方法
            $(window).load(function(){  
                    ...code...  
            })  

 

  • ready和load中ready先執行,load後執行

 

  • DOM文件載入步驟:

1)解析HTML結構;
           2)載入外部指令碼和樣式檔案;
           3)解析並執行指令碼程式碼;
           4)構造HTML DOM模型 ;//ready
           5)載入圖片等外部檔案;
           6)頁面載入完畢。//load


     從以上描述可以看出,ready在第(4)步完成之後就執行,而load在第(6)步完成之後才執行

 

  • ready事件:

       ready事件在DOM結構繪製完成之後就會執行,這樣能確保就算有大量的媒體檔案沒有加載出來,JS程式碼一樣可以執行

 

  • load事件

       load事件必須等到網頁中所有內容全部載入完畢之後才被執行。如果一頁網頁有大量圖片的話,則就出現網頁文件已經呈現   出來但網頁資料(指令碼初始化)還沒載入完畢,導致load事件不能夠即時被觸發.

 

總結:
ready事件先於load事件被啟用,如果網頁文件中沒有載入外部檔案,則它們的響應時間基本上是相同的.