Недавно я пишу фреймворк JavaScript. Я только что инкапсулировал событие Domcontent, и я был немного взволнован. Я делал заметки о принципах и проблемах совместимости, возникших в процессе разработки, чтобы не забывать повсюду.
Когда мы пишем код JS, мы обычно добавляем событие Window.onload, в основном для использования GetElementByID, GetElementsBytagName и других методов для выбора элементов DOM для работы после загрузки DOM. Тем не менее, window.load будет ждать, пока не будут запускаются Dom, Script, CSS, и все ресурсы на изображении или даже iframe не будут запускаются. Во многих случаях на веб -странице больше изображений и больше. Для загрузки изображения требуется много времени, и, очевидно, слишком поздно выполнять JS, что часто повлияет на пользовательский опыт.
Многие фреймворки JS имеют функцию Document.Ready, такую как метод JQuery $ (Document) .Ready (), который может выполнять код JS сразу после загрузки DOM, так что изображение может быть загружено медленно.
Ядром документа. Готовый является загруженное событие Domcontent. Firefox, Chrome, Opera, Safari и IE9+ могут использовать AddEventListener ('domcontentload', fn, false) для привязки событий. IE6 ~ 8 не поддерживает Domcontentloaded событие, поэтому обработка совместимости должна быть выполнена для IE6 ~ 8.
Информация гласит, что IE6 ~ 8 может использовать событие Document.OnreadyStateChange, чтобы прослушать, равносит ли статус Document.ReadyState, чтобы определить, был ли DOM загружен. Если на странице встроен IFRAME, Document.ReadyState IE6 ~ 8 будет ждать, пока все ресурсы в IFRAME не будут загружены до того, как они станут завершенными. В настоящее время iframe становится многоемным, отнимающим много времени, основным пользователем. Но после тестирования, даже если на странице нет Iframe, когда готово, что Equal Coplect, событие Onload фактически запускается вместо того, что Domcontentloaded Event, что удивительно до этого момента.
К счастью, т.е. имеет уникальный метод Doscroll. Когда DOM страницы не загружены, будет сообщена ошибка, когда будет вызван метод Doscroll. И наоборот, до тех пор, пока Doscroll вызывается с интервалами, пока не сообщается об ошибках, это означает, что Dom Page Dom был загружен. Этот метод действителен независимо от того, был ли содержание на изображении и iframe загружен.
Если несколько файлов JS связаны с событием Document.Ready, чтобы не дать браузеру многократно связывать и выполнять упорядоченное значение, для решения проблемы может быть введен механизм очереди событий.
Выше приведено вопрос о принципе и совместимости события Document.Ready. Ниже приведен абзац примера кода. Чтобы облегчить понимание процесса выполнения, процесс выполнения записывается в комментариях с использованием режима инкапсуляции функции. Если есть неуместность, пожалуйста, дайте мне несколько советов.
Кода -копия выглядит следующим образом:
// Сохранить очередь событий Domready
EventQueue = [];
// Судите, был ли DOM загружен
isReady = false;
// судить, связан ли Дом,
iSbind = false;
/*Выполнить domready ()
*
*@param {function}
*@execute подталкивает обработчик событий в очередь событий и связывает domcontentloaded
* Если загрузка DOM была завершена, немедленно выполните
*@Caller
*/
функция domready (fn) {
if (iSready) {
fn.call (окно);
}
еще{
EventQueue.push (fn);
};
BindEary ();
};
/*Domready Event Binding
*
*@param null
*@Execute Modern Browsers Bind Domcontentloaded через AddevListener, включая IE9+
IE6-8 определяет, был ли DOM загружен путем оценки Doscroll
*@Caller domready ()
*/
function bindudeReady () {
if (isready) return;
if (iSbind) возврат;
iSbind = true;
if (window.addeventListener) {
document.addeventlistener ('domcontentload', execfn, false);
}
иначе if (window.attachevent) {
doscroll ();
};
};
/*Doscroll определяет, был ли загружен DOM IE6-8.
*
*@param null
*@execute doscroll определяет, загружается ли DOM
*@caller bindready ()
*/
function doscroll () {
пытаться{
document.documentelement.doscroll ('left');
}
поймать (ошибка) {
return SetTimeout (doscroll, 20);
};
execfn ();
};
/*Очередь событий выполнения
*
*@param null
*@Обработчик событий Exepute Loop в очереди
*@caller bindready ()
*/
function execfn () {
if (! Isready) {
isReady = true;
for (var i = 0; i <evenqueue.length; i ++) {
EventQueue [i] .call (окно);
};
EventQueue = [];
};
};
// файл JS 1
domready (function () {
...
});
// файл JS 2
domready (function () {
...
});
// Обратите внимание, что если он загружается асинхронно, не связывайте метод Domready, в противном случае функция не будет выполнена.
// Поскольку до загрузки асинхронной загрузки JS Domcontentload был запущен, и AddeventListener нельзя выслушать при выполнении
Тестовая страница: загружаются два больших изображения. Нагрузка требует, чтобы изображение было загружено до того, как JS может быть выполнено. Domcontentload только должен ждать, пока DOM не будет загружен для выполнения JS. Вы можете открыть Firebug, чтобы просмотреть процесс загрузки. Не забудьте почистить кэш браузера перед каждым тестом.