Загрузка Javascript против готовых vs domready против событий DOMContentLoaded

Ответ 1

.ready()

Хотя JavaScript предоставляет событие загрузки для выполнения кода, когда страница отображается, это событие не запускается до тех пор, пока все активы такие как изображения, были полностью получены. В большинстве случаев script может быть запущен, как только иерархия DOM будет полностью построен. Обработчик, переданный в .ready(), гарантированно будет выполняется после того, как DOM готов, так что это, как правило, лучшее место для присоединить все другие обработчики событий и запустить другой код jQuery. Когда используешь скрипты, которые полагаются на ценность свойств стиля CSS, важно ссылаться на внешние таблицы стилей или внедрять элементы стиля перед ссылаясь на сценарии.

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

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

Ссылка: http://api.jquery.com/ready/

.load()

Этот метод является ярлыком для .on( "load", handler).

Событие загрузки отправляется элементу, когда он и все подэлементы имеют была полностью загружена. Это событие может быть отправлено на любой элемент связанные с URL: изображениями, сценариями, фреймами, iframe и оконный объект.

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

Ссылка: http://api.jquery.com/load-event/

GlobalEventHandlers.onload

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

Существуют также события DOM, специфичные для Gecko, такие как DOMContentLoaded и DOMFrameContentLoaded (который можно обрабатывать с помощью EventTarget.addEventListener()), которые запускаются после DOM для страница была построена, но не ждите других ресурсов. завершение загрузки.

Резервное копирование через браузер

Internet Explorer 8 поддерживает событие readystatechange, которое может быть используется для обнаружения готовности DOM. В более ранней версии Интернета Explorer, это состояние может быть обнаружено путем регулярного выполнения document.documentElement.doScroll( "left" );, поскольку этот фрагмент будет кидать ошибка, пока DOM не будет готова.

Универсальные JS-библиотеки, такие как jQuery, предлагают кросс-браузер методы обнаружения того, что DOM готов. Есть также автономные скрипты, которые предлагают эту функцию: contentloaded.js(поддерживает только один слушатель) и jquery.documentReady.js(не зависит от jQuery, несмотря на его название). Ref: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

код:

document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
});

function load() {
    console.log("load event detected!");
}
window.onload = load;

$(document).ready(function () {
    console.log('ready');
});

$(window).load(function () {
    console.log('loaded');
});

Демо-версия Timeline: http://jsfiddle.net/HgJ33/

Ответ 2

Может быть интересно записать различные фреймворки и их события:

Вот серия тестов с помощью jsFiddle. Тот же html, разные рамки, разница в ms.

Mootools

window.onload = function () {
    var now = new Date().getTime() - time;
    console.log(now, 'onload')             // 14 ms
};
window.addEvent('load', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'load')               // 15 ms
});
window.addEvent('domready', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'domready')           // 1 ms
});

jQuery

window.onload = function () {
    var now = new Date().getTime() - time;
    console.log(now, 'onload')             // 20 ms
};
$(document).on('DOMContentLoaded', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'DOMContentLoaded')   // 10 ms
});
$(document).on('ready', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'ready')              // 20 ms
});

Dojo Инструментарий

dojo.addOnLoad(function() {
    //do stuff
});

YUI

YUI().use('*',function(Y) {
    Y.on("domready", function() {
        //do stuff
    }, Y, "The DOMContentLoaded event fired.  The DOM is now safe to modify via script.");
});

Прототип

document.observe("dom:loaded", function() { 
    //do stuff
});

Sencha JS

Ext.onReady(function() {
    //do stuff
});

Ответ 3

Лучше подумать с точки зрения того, что вы хотите и какие браузеры поддерживать.

Чтобы сделать манипуляции в Document Object Model (DOM), вам нужно будет убедиться, что HTML-страница загружена по сети и проанализирована в дерево. Один из способов решения этой проблемы - написать весь код в конце HTML файла, что приводит к обработке этих javascript только после разбора HTML. Другим более новым стандартным способом является прослушивание события DOMReady или DOMContentLoaded или готового события, чтобы убедиться, что обработчик запущен только после того, как DOM готов

После того, как дерево DOM будет создано, браузер будет запрашивать изображения, аудио, видео и т.д. После того, как все эти ресурсы загружаются, окно загрузить будет запущено, теперь страница готова к показу полностью.

Итак, в основном вы должны просто подумать, может ли ваш код быть выполнен с готовым деревом DOM, или вам нужно все, чтобы загрузить ваш код. Если встроенная реализация DOM для javascript не распространяется на все браузеры, которые вам нужны для поддержки, вы можете пойти на jQuery DOMready, что является причиной ее создания.