Как работает функция jQuery "document ready"?

Как jQuery проверяет, загружен ли документ? Как проверить, что загрузка документа завершена?

Ответ 1

Проверьте функцию bindReady в исходном коде.

Они привязываются к событию DOMContentLoaded (или onreadystatechange в некоторых браузерах). Они также имеют резерв для обычного события загрузки, если DOMContentLoaded не поддерживается или не запускается по другим причинам. В браузерах, поддерживающих его, они используют этот вызов:

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

В IE < 9:

document.attachEvent( "onreadystatechange", DOMContentLoaded);

Второй экземпляр DOMContentLoaded в этих вызовах - это их собственная функция - фактически ссылка на функцию ready, расположенную выше bindReady в исходном коде. Эта функция проверит, что дерево DOM действительно выполняется, проверяя document.body. Если он еще не существует, они ждут миллисекунду (используя setTimeout) и снова проверяют. Когда document.body существует, они пересекают список вызовов, которые вы установили.

Ответ 2

Итак, происходит немного за кулисами, но это суть этого, непосредственно для источника jQuery:

// Mozilla, Opera and webkit nightlies currently support this event
        if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );

        // If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }

Итак, для большинства браузеров (Mozilla, Opera и Webkit) есть событие DOMContentLoaded, которое JQuery прослушивает, когда оно запускается, затем вызывает все готовые обработчики, которые вы зарегистрировали с помощью jQuery.

IE действует несколько иначе, поскольку у них нет события DOMContentLoaded, они пытаются подключиться к событию onreadystatechange документа, они также подключают событие window.onload, а также делают бит-подрыв кода, где они постоянно пытаются прокручивать страницу каждые миллисекунды (doScrollCheck). Который когда-либо один из этих огней сначала запускает готовые обработчики, а последующие события игнорируются.

Я надеюсь, что это имеет смысл и поможет вам:)

Ответ 3

jQuery не делает ничего, что JavaScript не может/не делает - это просто фреймворк/библиотека JavaScript. Что он делает, это предоставить оболочку вокруг событий JavaScript, которые реализуются браузерами, например onload ($.load()) и DOMContentLoaded ($.ready()). Конечно, есть много работы под капотом, которая пытается сделать это поведение как можно более стандартным в браузерах и работает с ошибками браузера, проблемами и несовместимостью.

Например, IE не поддерживал DOMContentLoaded до IE 9, но jQuery должен обеспечить реализацию для него. Возможно, вам захочется увидеть эти ссылки, чтобы лучше понять, что это за событие, и как можно реализовать что-то подобное, даже без jQuery:

Если вы действительно хотите узнать, что делается jQuery, вы должны проверить источник jQuery.