Khi làm việc với JavaScript và Mô hình đối tượng tài liệu (DOM), bạn có thể muốn tập lệnh của mình chỉ chạy khi DOM được tải.
Bạn có thể làm điều này bằng cách sử dụng $(document).ready() phương pháp trong jQuery, hoặc DOMContentLoaded sự kiện trong vanilla JavaScript.
Trong bài viết này, bạn sẽ tìm hiểu cách làm cho mã JavaScript của bạn chỉ chạy khi DOM được tải bằng jQuery và vanilla JavaScript.
Làm thế nào để sử dụng $(document).ready() Phương thức trong jQuery
Trước khi JavaScript chạy trong trình duyệt, nó sẽ đợi nội dung của tài liệu được tải. Điều này bao gồm bảng định kiểu, hình ảnh, v.v.
Theo quy ước, việc đặt phần tử tập lệnh ngay trước thẻ đóng nội dung làm cho tập lệnh đợi phần còn lại của tài liệu tải trước khi chạy.
Chúng ta cũng có thể làm cho quá trình này nhanh hơn trong jQuery bằng cách sử dụng $(document).ready() phương pháp. Các $(document).ready() phương thức này chỉ đợi DOM tải, nó không đợi biểu định kiểu, hình ảnh và iframe.
Đây là một ví dụ:
$(document).ready(function () {
console.log("Hello World!");
});Trong đoạn mã trên, $(document).ready() phương thức sẽ chỉ chạy sau khi DOM được tải. Vì vậy, bạn sẽ chỉ thấy “Xin chào thế giới!” trong bảng điều khiển sau khi $(document).ready() phương pháp đã bắt đầu chạy.
Tóm lại, bạn có thể viết tất cả mã jQuery của mình bên trong $(document).ready() phương pháp. Bằng cách này, mã của bạn sẽ đợi DOM được tải trước khi chạy.
Làm thế nào để sử dụng DOMContentLoaded Sự kiện trong JavaScript
Cũng giống như của jQuery $(document).ready() phương pháp, các DOMContentLoaded sự kiện kích hoạt sau khi DOM đã tải – nó không đợi biểu định kiểu và hình ảnh.
Đây là cách sử dụng DOMContentLoaded Sự kiện:
document.addEventListener("DOMContentLoaded", () => {
console.log("Hello World!");
});Khi DOM đã được tải, DOMContentLoaded sự kiện sẽ phát hiện ra nó và chạy.
Bạn nên sử dụng DOMContentLoaded sự kiện khi:
- Bạn có một số chức năng nhất định trong trang web của mình sẽ kích hoạt ngay lập tức mà không cần đợi phần còn lại của nội dung trang.
- Bạn có một thẻ tập lệnh được đặt trong phần tử đầu.
Tóm lược
Trong bài viết này, chúng tôi đã nói về$(document).ready() phương thức trong jQuery và DOMContentLoaded sự kiện trong vanilla JavaScript.
Chúng tôi sử dụng chúng để thực thi mã JavaScript khi DOM được tải.
Phần thú vị của các chức năng này là chúng cho phép mã JavaScript chạy mà không cần đợi hình ảnh và biểu định kiểu tải hoàn toàn trong trang web.
Chúc mừng mã hóa!
