$(document).ready() tương đương trong JavaScript thuần (Vanilla JS)

Trong jQuery, $(document).ready() chạy code khi DOM đã sẵn sàng (trước khi tải hình ảnh, CSS...). Vanilla JS có các cách tương đương:

1. DOMContentLoaded (Khuyến nghị nhất)

Sự kiện kích hoạt khi HTML hoàn toàn parse xong, DOM tree sẵn sàng.


document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM ready!');
  // Khởi tạo app, gán event listener...
});

2. window.onload (Load event)

Chạy khi toàn bộ trang tải xong: HTML, CSS, JS, hình ảnh, iframe... Chậm hơn DOMContentLoaded.


window.addEventListener('load', function() {
  console.log('Trang tải hoàn toàn!');
  // Đo kích thước ảnh, layout...
});

3. Script đặt cuối `<body>` (Cách cổ điển)

Đặt <script> trước </body> – DOM ở trên đã parse xong.


<body>
  <!-- Nội dung -->
  <script>
    // DOM đã sẵn sàng
    initApp();
  </script>
</body>

4. `defer` attribute (Hiện đại, khuyến nghị)

Script tải song song, thực thi theo thứ tự sau khi HTML parse xong (tương tự DOMContentLoaded).


<script src="app.js" defer></script>

5. `async` attribute

Tải song song, thực thi ngay khi tải xong (không đảm bảo thứ tự, không chờ DOM).


<script src="analytics.js" async></script>

So sánh

Cách	Thời điểm chạy	Thứ tự	Chờ DOM?	Chờ tài nguyên?
`DOMContentLoaded`	DOM parse xong	Đăng ký trước → chạy trước	Có	Không
`window.onload`	Tất cả tải xong	Đăng ký trước → chạy trước	Có	Có
Script cuối body	Ngay khi gặp script	Thứ tự viết	Có (phần trên)	Không
`defer`	DOM parse xong	Thứ tự viết	Có	Không
`async`	Script tải xong	Không đảm bảo	Không	Không

Polyfill cho code cũ (setInterval check)

Bài gốc dùng setInterval kiểm tra document.readyState – cách này cũ, không khuyến khích.


// Cách cũ (không khuyến khích)
var loader = setInterval(function() {
  if (document.readyState !== "complete") return;
  clearInterval(loader);
  initApp();
}, 300);

Best Practice hiện nay

Dùng <script defer src="..."> trong <head> – đơn giản, chuẩn, hiệu năng tốt.
Hoặc DOMContentLoaded cho inline script/module.
Tránh window.onload trừ khi cần kích thước ảnh/font.
Tránh async cho script phụ thuộc DOM.