JavaScript domready?

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

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

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

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

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

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

Обратите внимание, что это НЕ то же самое, что событие window.onload , поскольку onload выполняется первым после загрузки других ресурсов (изображений и т. Д.). Код I используемый в моем примере, будет выполняться, когда 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 допускает несколько обратных вызовов и имеет проверку, чтобы убедиться, что вы не можете добавить одну и ту же функцию дважды и т. Д.