Дом Javascript готов?

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

$(function () {
    // do stuff after DOM has loaded
});

Обратите внимание, что это НЕ то же самое, что событие window.onload, так как onload выполняется первым после загрузки других ресурсов (изображений и т. д.). Код, который я использовал в своем примере, будет выполняться, когда DOM завершит загрузку, т. е. когда вся структура HTML доступен (не обязательно, когда доступны изображения, CSS и т. д.)

Если вам нужна проверяемая переменная, вы можете установить ее в готовой функции:

var documentIsReady = false;
$(function () { documentIsReady = true; });

Конечно, вы можете найти даже более легкие библиотеки, чем jQuery, если все, что вы хотите сделать, это проверить готовность к DOM. Но используйте библиотеку в тех случаях, когда разные браузеры ведут себя по-разному (это один из таких случаев).

Используя некоторый код из библиотеки DOMAssistant, ваша собственная функция «DOM готова» не должна быть слишком сложной:

var domLoaded = function (callback) {
    /* Internet Explorer */
    /*@cc_on
    @if (@_win32 || @_win64)
        document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
        document.getElementById('ieScriptLoad').onreadystatechange = function() {
            if (this.readyState == 'complete') {
                callback();
            }
        };
    @end @*/
    /* Mozilla, Chrome, Opera */
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback, false);
    }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                callback();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */
    window.onload = callback;
};

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

За 5 лет, прошедших с тех пор, как был задан этот вопрос, DOMContentLoaded стал повсеместно поддерживаемым событием, и вы можете просто использовать его.

document.addEventListener('DOMContentLoaded', function() {
    //.. do stuff ..
}, false);

Посмотрите эту демонстрацию от Microsoft. -> http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html А вот и суть кода, позволяющего запускать JS на готовом DOM...

(function () {
    function load2(){
        // put whatever you need to load on DOM ready in here
        document.getElementById("but3").addEventListener("click", doMore, false);
    }
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', load2, false);
    } else {
        window.attachEvent('onload', load2);
    }
} ());

Вот некоторые исходники javascript для демонстрации. http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js

Это работает хорошо. Отлично!!.. в Google Chrome и IE 9.

document.addEventListener("DOMContentLoaded", function(e){
    console.log("dom ready");//output to web browser console
});

для этого не требуется JQuery. Нет необходимости передавать третий параметр в DOMContentLoaded, так как у этого события нет родителя для прохождения события. Также не нужно увлекаться тем, что говорят все остальные. Это сообщит вам, когда DOM будет полностью загружен и готов к использованию. Я LOLed, когда я заметил библиотеку помощника DOM. Эта библиотека абсолютно бесполезна.

Событие DOMContentLoaded запускается, когда документ полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и подкадров.

addEventListener() — отличная функция для проверки любого события, включая статус готовности DOM. При использовании «DOMContentLoaded» третий параметр в addEventListener() не нужен, так как у этого триггера нет родительского элемента для передачи события. В моем примере выше вы заметите, что второй параметр является анонимной функцией. Вы также можете передать имя функции во второй параметр.

document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]);

Еще одно преимущество использования этого над JQuery заключается в том, что он не сломается при обновлении JQuery.

jQuery не использует window.onload.

$(document).ready() ждет, пока DOM загрузится и его можно будет пройти (остальное содержимое может быть загружено или не загружено к этому моменту).

Если вы откроете исходный код для jQuery и разберетесь в беспорядке, вы обнаружите, что работа выполняется методом bindReady(), который имеет несколько разных реализаций для разных браузеров, и только когда все эти реализации терпят неудачу, он возвращается к прослушиванию для событие загрузки для окна.

На самом деле это одна из основных причин, по которой большинство людей используют такие фреймворки, как jQuery, потому что решение этой проблемы несовместимо в разных браузерах.

Попробуйте следующее:
Ссылка: onDomReady на GitHub или источник ниже:

if(document.ondomready == undefined) {
    document.ondomready = {};
    document.ondomready = null;
} else {
    document.ondomready=document.ondomready;
}
var oldonload=document.onload;
var isLaunched = 0;
document.onload = function() {  
    if(oldonload !== null) {
        oldonload.call();
    }
};
document.addEventListener("DOMContentLoaded", function onDom(evt) {
    var olddomready = document.ondomready;
    if(olddomready !== null) {
        if(isLaunched == 0) {
            olddomready.call(evt);
            isLaunched == 1;
            //We now launched the mapped DOMContentLoaded Event
        } else {
            //We already launched DOMContentLoaded Event
        }
    }
}, false);

Я уже тестировал это в Opera 11.x/12.x. На других еще не проверял. Дайте мне знать, если они это сделают.

Примечание. Я еще не загрузил репозиторий, но скоро сделаю это в свободное время.

Если вам нужны библиотеки меньшего размера, которые делают только определенные вещи, вы можете использовать библиотеки в microjs. Для рассматриваемого вопроса можно использовать готовый метод DOMStatic libs.