Sự khác biệt giữa các sự kiện DOMContentLoaded và load

Sự khác biệt giữa DOMContentLoadedvà loadsự kiện là gì?

Từ Trung tâm nhà phát triển Mozilla :

Sự kiện DOMContentLoaded được kích hoạt khi tài liệu đã được tải và phân tích cú pháp hoàn toàn, không cần chờ biểu định kiểu, hình ảnh và khung con để tải xong (sự kiện tải có thể được sử dụng để phát hiện trang được tải đầy đủ).

Sự DOMContentLoadedkiện sẽ kích hoạt ngay khi hệ thống phân cấp DOM được xây dựng đầy đủ, loadsự kiện sẽ thực hiện khi tất cả các hình ảnh và khung phụ đã tải xong.

DOMContentLoadedsẽ hoạt động trên hầu hết các trình duyệt hiện đại, nhưng không phải trên IE kể cả IE9 trở lên. Có một số cách giải quyết để bắt chước sự kiện này trên các phiên bản IE cũ hơn, như được sử dụng trên thư viện jQuery, chúng đính kèm sự kiện cụ thể của IE onreadystatechange .

Xem sự khác biệt của chính bạn:

BẢN GIỚI THIỆU

Từ Microsoft IE

Sự kiện DOMContentLoaded kích hoạt khi phân tích cú pháp của trang hiện tại hoàn tất; sự kiện tải sẽ kích hoạt khi tất cả các tệp đã tải xong từ tất cả các tài nguyên, bao gồm quảng cáo và hình ảnh. DOMContentLoaded là một sự kiện tuyệt vời để sử dụng để kết nối chức năng UI với các trang web phức tạp.

Từ mạng nhà phát triển Mozilla

Sự kiện DOMContentLoaded được kích hoạt khi tài liệu đã được tải và phân tích cú pháp hoàn toàn, không cần chờ biểu định kiểu, hình ảnh và khung con để tải xong (sự kiện tải có thể được sử dụng để phát hiện trang được tải đầy đủ).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Một trang không thể được thao tác an toàn cho đến khi tài liệu "sẵn sàng". jQuery phát hiện trạng thái sẵn sàng này cho bạn. Mã được bao gồm trong $ (document). Yet () sẽ chỉ chạy khi trang Mô hình đối tượng tài liệu (DOM) đã sẵn sàng để mã JavaScript thực thi. Mã được bao gồm trong $ (window) .load (function () {...}) sẽ chạy khi toàn bộ trang (hình ảnh hoặc iframe), không chỉ DOM, đã sẵn sàng.

Xem: http://learn.jquery.com/USE-jquery-core/document- yet /

• domContentLoaded : đánh dấu điểm khi cả DOM đã sẵn sàng và không có bảng định kiểu nào đang chặn thực thi JavaScript - có nghĩa là bây giờ chúng ta có thể (có khả năng) xây dựng cây kết xuất. Nhiều khung JavaScript chờ sự kiện này trước khi chúng bắt đầu thực hiện logic riêng của chúng. Vì lý do này, trình duyệt chụp các dấu thời gian của EventStart và EventEnd để cho phép chúng tôi theo dõi thời gian thực hiện này.

• loadEvent : là bước cuối cùng trong mỗi trang tải trình duyệt sẽ kích hoạt một sự kiện trên Tải trực tiếp có thể kích hoạt logic ứng dụng bổ sung.

nguồn

Đây là một số mã làm việc cho chúng tôi. Chúng tôi thấy MSIE bị tấn công và bỏ lỡ DomContentLoaded, dường như có một số độ trễ khi không có tài nguyên bổ sung nào được lưu vào bộ nhớ cache (tối đa 300ms dựa trên ghi nhật ký bảng điều khiển của chúng tôi) và nó kích hoạt quá nhanh khi chúng được lưu trữ. Vì vậy, chúng tôi đã sử dụng một dự phòng cho MISE. Bạn cũng muốn kích hoạt doStuff()chức năng cho dù DomContentLoadedkích hoạt trước hay sau các tệp JS bên ngoài của bạn.

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}