JQuery里有ready和load事件

$(document).ready(function() {// ...代碼... }) //document ready 簡寫 $(function() {// ...代碼... }) $(document).load(function() {// ...代碼... })

他們的主要區別為ready先執行，load后執行。

DOM文檔加載的步驟：

(1) 解析HTML結構。 (2) 加載外部腳本和樣式表文件。 (3) 解析并執行腳本代碼。 (4) 構造HTML DOM模型。//ready (5) 加載圖片等外部文件。 (6) 頁面加載完畢。//load

從上面的描述中大家應該已經理解了吧，ready在第（4）步完成之后就執行了，但是load要在第（6）步完成之后才執行。

?

結論：

ready與load的區別就在于資源文件的加載，ready構建了基本的DOM結構，所以對于代碼來說應該越快加載越好。在一個高速瀏覽的時代，沒人愿意等待答案。假如一個網站頁面加載超過4秒，不好意思，你1/4的用戶將面臨著流失，所以對于框架來說用戶體驗是至關重要的，我們應該越早處理DOM越好，我們不需要等到圖片資源都加載后才去處理框架的加載，圖片資源過多load事件就會遲遲不會觸發。

?

一個實例：

document.addEventListener("DOMContentLoaded", function() {console.log('DOMContentLoaded回調') }, false);window.addEventListener("load", function() {console.log('load事件回調') }, false);console.log('普通方法一')//測試加載 $(function(){console.log('jquery ready') })console.log('普通方法二')

執行的順序為：

普通方法一 普通方法二 jquery ready DOMContentLoaded回調 load事件回調

　　

　　

　　

　　

轉載于:https://www.cnblogs.com/dtdxrk/p/4137374.html

總結

以上是生活随笔為你收集整理的ready与load的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。