頁面加載時JS初始化的時機選擇取決于腳本依賴的內容。主要有兩種方式：一、domcontentloaded：dom結構就緒后立即執行，適合處理與dom操作相關的邏輯，如綁定事件、修改元素等，但不依賴圖片或資源加載；二、window.onload：等待所有資源（如圖片、樣式表）加載完成后執行，適合需要獲取圖片尺寸或依賴完整資源的場景。選擇依據是：若只需dom結構，用domcontentloaded；若需全部資源，用window.onload。
頁面加載時JS初始化，主要看你想在什么時候執行腳本。常見的兩種方式是 window.onload 和 DOMContentLoaded。它們都能用來觸發初始化操作，但時機不同。
簡單說：
- DOMContentLoaded 是文檔結構（DOM）就緒后立刻觸發，不等圖片、樣式表這些資源加載完。
- window.onload 是整個頁面包括所有資源都加載完成后才觸發。
所以如果你的JS代碼只需要操作DOM，用 DOMContentLoaded 更快；如果需要等圖片或外部資源再執行，那就得用 window.onload。
立即學習“前端免費學習筆記（深入）”；
一、DOMContentLoaded：DOM準備好就執行
這是最常用的頁面初始化時機之一。適合處理頁面結構相關的邏輯，比如綁定點擊事件、動態修改DOM元素等。
你可以這樣寫：
document.addEventListener('DOMContentLoaded', function() { // 這里放你的初始化代碼 });
或者使用jquery的話：
$(document).ready(function() { // 初始化代碼 });
甚至可以簡化為：
$(function() { // 初始化代碼 });
適用場景舉例：
- 頁面上有個按鈕，點擊彈出提示框。
- 動態生成一些下拉菜單或導航欄。
注意點：
- 此時可能圖片還沒加載完，不要依賴圖片尺寸相關邏輯。
- 如果腳本放在body底部，也可以不用監聽這個事件，直接寫在DOM后面。
二、window.onload：等全部資源加載完再執行
如果你想確保圖片、iframe、樣式表這些資源都加載完成后再執行JS，就要用 window.onload。
寫法如下：
window.onload = function() { // 所有資源加載完成后的初始化代碼 };
也可以加監聽器：
window.addEventListener('load', function() { // 初始化代碼 });
適用場景舉例：
- 需要獲取圖片寬高來布局。
- 頁面中有大量異步請求，需要等數據回來再操作DOM。
- 做頁面性能統計，等所有資源加載完再上報數據。
注意點：
- 如果頁面有很多大圖或第三方資源，可能會延遲很久才觸發。
- 不建議把太多邏輯放在這里，影響用戶體驗。
三、怎么選？看你的JS依賴什么
選擇哪個事件，關鍵看你初始化的JS代碼是否依賴某些資源：
- ? 只需要DOM結構 → 用 DOMContentLoaded
- ? 需要圖片、視頻、字體等資源 → 用 window.onload
另外，還可以結合實際情況分階段處理：
- DOM就緒后先做基本交互（如按鈕綁定）
- 等圖片加載完再做視覺效果（如輪播圖自動播放）
有些框架（比如vue、React）會自動處理初始化時機，但如果是原生JS開發，這兩個事件就是基礎工具了。
基本上就這些。兩個事件的區別其實挺直觀，關鍵是理解你當前腳本依賴什么內容。別一股腦全塞到 onload 里就行。
以上就是html頁面加載時JS怎么初始化？window.onload與DOMContentLoaded
