Cách phát hiện xem DOMContentLoaded đã được kích hoạt chưa

Question

Tôi đang cố gắng giúp phát triển thư viện và tôi đang cố gắng làm việc với tải trang.
Trong quá trình tôi muốn làm cho thư viện hoàn toàn tương thích với việc sử dụng trì hoãn và không đồng bộ.

Điều tôi muốn đơn giản:
Làm cách nào để biết rằng DOMContentLoaded đã được kích hoạt khi tệp được thực thi?

Tại sao điều này lại khó khăn như vậy?
Trong IE, document.readyState hiển thị tương tác trước DOMContentLoaded.
I sẽ không sử dụng tính năng phát hiện trình duyệt theo bất kỳ cách nào, điều này trái ngược với chính sách của tôi và những người tham gia còn lại.

Giải pháp thay thế chính xác là gì?

Chỉnh sửa:

Dường như tôi chưa đủ rõ ràng. Tôi là không phải muốn biết sự kiện tải đã xảy ra chưa !!! Tôi đã biết cách giải quyết vấn đề đó! Tôi muốn biết cách giải quyết với DOMContentLoaded !!!

Answer 1

tôi sẽ nghĩ rằng bạn có thể sử dụng:

if (document.readyState === "complete" || document.readyState === "loaded") { 
    // document is already ready to go 
} 

này đã được hỗ trợ trong IE và webkit trong một thời gian dài. Nó đã được thêm vào Firefox trong 3.6. Đây là số spec. "loaded" dành cho các trình duyệt Safari cũ hơn.

Nếu bạn muốn biết khi trang đã được phân tích cú pháp, nhưng tất cả subresources chưa được kích hoạt, bạn có thể thêm "tương tác" giá trị:

if (document.readyState === "complete" 
    || document.readyState === "loaded" 
    || document.readyState === "interactive") { 
    // document has at least been parsed 
} 

Hơn thế nữa, nếu bạn thực sự chỉ muốn biết khi DOMContentLoaded đã kích hoạt, thì bạn sẽ phải cài đặt một trình xử lý sự kiện cho điều đó (trước khi nó kích hoạt) và thiết lập một cờ khi nó kích hoạt.

This MDN documentation cũng là một đọc thực sự tốt về hiểu thêm về trạng thái DOM.

Answer 2

Hãy thử điều này hoặc nhìn vào link

<script> 
    function addListener(obj, eventName, listener) { //function to add event 
     if (obj.addEventListener) { 
      obj.addEventListener(eventName, listener, false); 
     } else { 
      obj.attachEvent("on" + eventName, listener); 
     } 
    } 

    addListener(document, "DOMContentLoaded", finishedDCL); //add event DOMContentLoaded 

    function finishedDCL() { 
     alert("Now DOMContentLoaded is complete!"); 
    } 
</script> 

Chú giải này

Nếu bạn có một <script> sau một <link rel="stylesheet" ...>

trang sẽ không hoàn thành phân tích cú pháp - và DOMContentLoaded sẽ không cháy - cho đến khi biểu định kiểu được tải

Answer 3

Nếu bạn muốn biết "chính xác" nếu DOMContentLoaded đã bị sa thải, bạn có thể sử dụng một lá cờ boolean như thế này:

var loaded=false; 
document.addEventListener('DOMContentLoaded',function(){ 
loaded=true; 
... 
} 

sau đó kiểm tra với:

if(loaded) ... 

Answer 4

Các document.readyState được thay đổi khi sự kiện này là bắn . Vì vậy, bạn có thể kiểm tra giá trị readyState và cách này cho biết sự kiện có được kích hoạt hay không. Dưới đây là một mã để chạy start() khi tài liệu đã sẵn sàng cho nó:

if (/comp|inter|loaded/.test(document.readyState)){ 
    // In case DOMContentLoaded was already fired, the document readyState will be one of "complete" or "interactive" or (nonstandard) "loaded". 
    // The regexp above looks for all three states. A more readable regexp would be /complete|interactive|loaded/ 
    start(); 
}else{ 
    // In case DOMContentLoaded was not yet fired, use it to run the "start" function when document is read for it. 
    document.addEventListener('DOMContentLoaded', start, false); 
} 

Answer 5

Đây là điều, nếu một số thư viện khác (chẳng hạn như jQuery) đã sử dụng DOMContentLoaded, bạn không thể sử dụng nó một lần nữa. Đó có thể là tin xấu, bởi vì bạn kết thúc mà không thể sử dụng nó. Bạn sẽ nói, tại sao không chỉ sử dụng $(document).ready(), bởi vì, NO !, không phải mọi thứ đều cần sử dụng jQuery, đặc biệt nếu nó là một thư viện khác.