5.2 載入(Load)的相關事件

DOMContentLoaded

javascript：

document.addEventListener("DOMContentLoaded", function(){
  // DOM 載入完成之後
});

jQuery：

// 寫法一
$(document).ready(function() {
  // DOM 載入完成之後
});

// 寫法二
$(function(){
  // DOM 載入完成之後
});

load

javascript：

window.addEventListener("load", function(){
  // 圖片等資源載入完成之後
});

jQuery：

$(window).on("load", function(){
  // 圖片等資源載入完成之後
});

resize

JavaScript：

window.addEventListener("resize", function(){
  // 瀏覽器的寬高有改變時觸發
});

jQuery：

$(window).on("resize", function(){
  // 瀏覽器的寬高有改變時觸發
});

實測比較

範例 1：

範例 2：

一個動畫效果蓋住整個頁面，等到所有東西都渲染完之後，才將動畫效果給移除，就適合用 load 事件。