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廣告，感恩。

參考：

• $( document ).ready()
• window.onload vs $(document).ready()
• window.onload vs document.onload