Как определить, был ли запущен DOMContentLoaded

Я пытаюсь помочь в разработке библиотеки, и для этого я пытаюсь работать с загрузкой страницы.
В процессе я хочу сделать библиотеку полностью совместимой с использованием отложенных и асинхронных.

Я хочу просто:
Как я могу узнать, что DOMContentLoaded был запущен к моменту запуска файла?

Почему это так сложно?
В IE document.readyState показывается интерактивно перед DOMContentLoaded.
Я не будет использовать обнаружение браузера каким-либо образом, это против политики меня и остальных участников.

Какая правильная альтернатива?

Edit:

Похоже, я был недостаточно ясен. Я не заинтересован, чтобы узнать, произошло ли событие загрузки!!! Я уже знал, как решить эту проблему! Я хочу знать, как решить с помощью DOMContentLoaded!!!

Ответы

Ответ 1

Я бы подумал, что вы можете использовать:

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

Это поддерживается в IE и webkit в течение длительного времени. Он добавлен в Firefox в 3.6. Здесь spec. "loaded" предназначен для более старых браузеров Safari.

Если вы хотите знать, когда страница была проанализирована, но все подресурсы еще не загружены, вы можете добавить "интерактивное" значение:

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

Помимо этого, если вы действительно просто хотите знать, когда DOMContentLoaded запущен, вам придется установить обработчик событий для этого (перед тем, как он срабатывает) и установить флаг при его запуске.

Эта документация по MDN также очень хорошо читается, чтобы больше узнать о состояниях DOM.

Ответ 2

document.readyState изменяется при запуске этого события. Таким образом, вы можете проверить значение readyState, и таким образом сообщите, было ли событие запущено или нет. Вот код для запуска start(), когда документ готов для него:

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);
}

Ответ 3

Попробуйте это или посмотрите на ссылку 

<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>

Примечание

Если у вас есть <script> после <link rel="stylesheet" ...>

страница не завершит синтаксический анализ - и DOMContentLoaded не будет срабатывать - пока не будет загружена таблица стилей

Ответ 4

Если вы хотите узнать "точно", если был запущен DOMContentLoaded, вы можете использовать логический флаг следующим образом:

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

затем установите флажок:

if(loaded) ...

Ответ 5

Вот что, если какая-то другая библиотека (например, jQuery) уже использовала DOMContentLoaded, вы не сможете использовать ее снова. Это может быть плохая новость, потому что вы в конечном итоге не сможете ее использовать. Вы скажете, почему бы просто не использовать $(document).ready(), потому что, NO!, не все должно использовать jQuery, особенно если это другая библиотека.