網頁

2018/2/8

JavaScript window.onload 和 jQuery $(document).ready() 的差異

在撰寫頁面的JavaScript或jQuery時,通常會利用window.onload事件或$(document).ready()事件來確保DOM完全載入,不過兩者仍有以下差異。

window.onload會等網頁的全部內容,包括圖片,CSS及<iframe>等外部內容載入後才會觸發,但$(document).ready()在Document Object Model (DOM) 載入後就會觸發,所以順序上$(document).ready()會比window.onload先執行。

window.onload是JavaScript的原生事件,而$(document).ready()是jQuery的事件(其實是透過監聽JavaScript的DOMContentLoaded事件來實現)。


window.onload的用法如下:

window.onload = function() {
  // console.log("window loaded")
};

$(document).ready()的用法如下:

$(document).ready(function() {
  // console.log("document ready");
});
// 也可簡寫成
$(function() {
  console.log("document ready");
});

如果覺得文章有幫助的話還幫忙點個Google廣告,感恩。


參考:

5 則留言:

  1. 幫你點廣告了~感謝分享~

    回覆刪除
  2. @樓上
    Thanks for your support.

    回覆刪除
  3. 我對於這兩個相比有疑問, $(document).ready()不是應該跟document.addEventListener('DOMContentLoaded, function(){}) 相比嗎?這兩個才是跟DOMContentLoaded 有關的事件,還是我誤會了?

    回覆刪除
  4. @樓上,我這邊指是就最常看到的兩個寫法做比較而已。

    回覆刪除