В бибдиотеке jQuery есть замечательная функция которая проверяет загрузку структуры DOM.
или
Но не всегда бывает нужно использовать саму библиотеку, особенно когда требуется только эта функция. Сдесь мы рассмотрим написание своей аналогичной функции обработки ожидания загрузки.
Последовательность операций в браузере выглядит так:
1. Синтаксический анализ разметки.
2. Загрузка стилей и сценариев.
3. Выполнение кода сценариев по мере их анализа в документе.
4. Полное формирование структуры документа.
5. Загрузка изображений
6. Завершение
Поэтому JavaScript который находиться в заголовке начинает выполняться до фактического формирования DOM. Это является существенной проблемой, поскольку скрипт не будет иметь доступ к структуре DOM. Существует несколько решений этой проблемы.
Самой популярной является ожидание загрузки всей страницы перед выполнением операций над DOM, на деле это вызов функции по событию load объекта window. Код:
Однако этот метод самый медленный. Если у вас на странице множество изображений и разнообразной графики и т.п. то придется ждать загрузки всего контента, перед выполнение JavaScript кода.
Второй способ это Ожидание загрузки основной части DOM. На самом деле это вставка кода перед закрывающим тегом , то что практически каждый второй рекомендует делать).
И последний самый интересный нам метод это — Определение факта загрузки
Эта методика работает за счет контроля готовности необходимых вам DOM -возможностей c максимальной скоростью и без блокирования браузера. Есть несколько вещей который необходмо проконтролировать, чтобы понять, что с HTML-документом можно работать:
* document. Выявить существование DOM-документа.
* document.getElementsByTagName и document.getElementById. Нужно проверить есть ли в документе эти часто используемые функции, они появляются при готовности к применению.
* document.body. Удостовериться, полностью ли загружен элемент body.
Использую эти проверки, можно достаточно точно узнать, когда DOM-структура будет готова к использованию.
Вот код функции которая проверяет готовность DOM-структуры:
Ничего не напоминает? )
$(document).ready(function(){
// Your code here
});
или
$(function(){
// Your code here
});
Но не всегда бывает нужно использовать саму библиотеку, особенно когда требуется только эта функция. Сдесь мы рассмотрим написание своей аналогичной функции обработки ожидания загрузки.
Последовательность операций в браузере выглядит так:
1. Синтаксический анализ разметки.
2. Загрузка стилей и сценариев.
3. Выполнение кода сценариев по мере их анализа в документе.
4. Полное формирование структуры документа.
5. Загрузка изображений
6. Завершение
Поэтому JavaScript который находиться в заголовке начинает выполняться до фактического формирования DOM. Это является существенной проблемой, поскольку скрипт не будет иметь доступ к структуре DOM. Существует несколько решений этой проблемы.
Самой популярной является ожидание загрузки всей страницы перед выполнением операций над DOM, на деле это вызов функции по событию load объекта window. Код:
addEvent(window, "load", function(){
//Манипуляции с DOM
});
Однако этот метод самый медленный. Если у вас на странице множество изображений и разнообразной графики и т.п. то придется ждать загрузки всего контента, перед выполнение JavaScript кода.
Второй способ это Ожидание загрузки основной части DOM. На самом деле это вставка кода перед закрывающим тегом , то что практически каждый второй рекомендует делать).
И последний самый интересный нам метод это — Определение факта загрузки
Эта методика работает за счет контроля готовности необходимых вам DOM -возможностей c максимальной скоростью и без блокирования браузера. Есть несколько вещей который необходмо проконтролировать, чтобы понять, что с HTML-документом можно работать:
* document. Выявить существование DOM-документа.
* document.getElementsByTagName и document.getElementById. Нужно проверить есть ли в документе эти часто используемые функции, они появляются при готовности к применению.
* document.body. Удостовериться, полностью ли загружен элемент body.
Использую эти проверки, можно достаточно точно узнать, когда DOM-структура будет готова к использованию.
Вот код функции которая проверяет готовность DOM-структуры:
function dready( f ) {
//Если DOM загружен то выполняем функцию
if( dready.done ) return f();
// Если мы дополнили функцию
if( dready.timer ) {
// внести ее в список исполняемых
dready.ready.push( f );
} else {
// Подключение события завершения загрузка страницы
// на тот случай, если загрузка завершиться первой
addEvent( window, "load", isReady);
// Инициализация массива исполняемых функций
dready.ready = [ f ];
//Проверка DOM на готовность как можно ыстрее
dready.timer = setInterval( isReady, 13);
}
}
// Проверка DOM на готовность к перемещению по ее структуре
function isReady() {
// Если мы определили готовность страницы -
// проигнорировать дальнейшее выполнение
if ( dready.done ) return false;
// Проверка доступности некоторых функций и элементов
if ( document && document.getElementsByTag && document.getElementById
&& document.body ) {
// Если они готовы, можно прекратить проверку
clearInterval( dready.timer );
dready.timer = null;
//Выполнение всех ожидавших функций
for ( var i = 0; i < dready.ready.length; i++ )
dready.ready[i]();
// Сохранение того, что было сделано
dready.ready = null;
dready.done = true;
}
}
// применять очень просто)
dready(function() {
alert("DOM загружен");
});
Ничего не напоминает? )