window.onload 和 .ready()

Jquery$(document).ready()是什么意思?和window.onload的區別? 還有其他什么寫法或者替代方法?

$(document).ready()的意思:

在DOM加載完之后執行一個函數(這里面的DOM加載完不代表全部文件加載完,例如圖片文件,雖然圖的src的地址加載好了,但是圖本身還沒到);

  • 有時候JavaScript寫在了最前面,要操作一個DOM,可是下面的DOM還未生成完畢,就會報錯,因為找不到,加$(document).ready()就是卡在 DOM加載完畢 ,剩余資源還未加載完成這段時間內,進行所有其它事件綁定及運行其它 jQuery 代碼;

window.onload的區別:

  • 1.執行時間
    window.onload是在DOM加載完成 + DOM相關的文件下載完成 之后再執行一個函數
    $(document).ready()是在DOM加載完之后執行一個函數
    $(document).ready()要比window.onload先執行;有時候頁面還沒有完全加載完畢而用戶已經在操作頁面,在技術上很多情況下,只要DOM已完全加載好了,JS就可以運行去操作DOM了,沒必要等到全部加載完成,所以用$(document).ready()來提前,但是當使用的JS依賴 CSS 屬性值時,或者需要在元素被加載之后才能使用時(例如,取得圖片的大小需要在圖片被加載完后才能知道),就需要將這樣的JS放到load事件中,以免因為貪圖快而帶來麻煩。
  • 2.能夠添加的數量
    window.onload不能同時編寫多個,因為我查看W3C的時候,window.onload是一種原生的DOM的事件,決定了在window上只能添加一個,后續的會覆蓋掉前面的。
    $(document).ready()可以同時編寫多個,我查看jQuery中文檔,他是這么介紹的.ready()方法只能被匹配當前文檔的jQuery對象調用,也就是說他是jQuery的方法,本質是一個函數,就可以執行多次。
  • 3.能否簡寫
    $(document).ready()可以簡寫
    window.onload 不能簡寫
    下面是$(document).ready()的簡寫
$(document).ready(handler)
$(handler)
$().ready(handler) //這種被不推薦
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 通過jQuery,您可以選取(查詢,query)HTML元素,并對它們執行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 670評論 0 3
  • 1.幾種基本數據類型?復雜數據類型?值類型和引用數據類型?堆棧數據結構? 基本數據類型:Undefined、Nul...
    極樂君閱讀 5,574評論 0 106
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,367評論 0 2
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    前端進階之旅閱讀 16,679評論 18 503
  • 第93天/56次 2017、5、29 覺察日記 事實:今天一家人總算是齊刷刷地去田子坊,我們一家三口很難湊齊,女兒...
    甌姐姐閱讀 158評論 0 0