Кроссбраузерное событие onDOMContentLoaded

, которое срабатывает после полной загрузки страницы и всех объектов на ней: счетчиков, картинок и т.п.

Событие onDOMContentLoaded — гораздо лучший выбор в 99% случаев. В этой статье рассмотрен код и основные приемы для его кроссбраузерной реализации.

Это событие срабатывает, как только готов DOM документ, до загрузки картинок и других не влияющих на структуру документа объектов.

Это очень удобно, т.к. картинки могут загружаться долго, а обработчик onDOMContentLoaded может произвести необходимые изменения на странице и инициализацию интерфейсов тут же, не дожидаясь загрузки всего.

«Родное» событие onDOMContentLoaded есть не во всех браузерах, поэтому мы рассмотрим код для кроссбраузерной поддержки этого события:

function bindReady(handler){ var called = false function ready() { // (1) if (called) return called = true handler() } if ( document.addEventListener ) { // (2) document.addEventListener( «DOMContentLoaded», function(){ ready() }, false ) } else if ( document.attachEvent ) { // (3) // (3.1) if ( document.documentElement.doScroll && window == window.top ) { function tryScroll(){ if (called) return if (!document.body) return try { document.documentElement.doScroll(«left») ready() } catch(e) { setTimeout(tryScroll, 0) } } tryScroll() } // (3.2) document.attachEvent(«onreadystatechange», function(){ if ( document.readyState === «complete» ) { ready() } }) } // (4) if (window.addEventListener) window.addEventListener(‘load’, ready, false) else if (window.attachEvent) window.attachEvent(‘onload’, ready) /* else // (4.1) window.onload=ready */ }

Разберем его по шагам.

Код будет пытаться вызвать поймать событие onDOMContentLoaded различными способами. Вполне может получиться так, что несколько способов сработают независимо.

Поэтому завернем обработчик handler в функцию ready() , единственный смысл которой — гарантировать, что handler будет вызван не более одного раза.

Событие onDOMContentLoaded поддерживают достаточно новые Firefox, Opera, Safari/Chrome. Нет гарантии, что версия посетителя поддерживает это событие, но попробовать стоит. Браузер Internet Explorer не поддерживает onDOMContentLoaded , поэтому для него используются обходные пути. Функция tryScroll() пытается скроллить документ вызовом doScroll . Если получается — значит, документ загрузился, если нет — заказывает повторную попытку черезsetTimeout, и так пока документ наконец не будет готов. На практике это очень надежный способ, но есть проблемы с фреймами, поэтому используется только для окон верхнего уровня.

Дополнительный фильтр — проверка document.body Событие document.onreadystatechange с проверкой readyState=»complete» , как и onDOMContentLoaded/onload , срабатывает после загрузке документа. Но, к сожалению, оно происходит уже после загрузки картинок. Поэтому onreadystatechange — вообще говоря, не то, что нам надо. Но это событие работает для фреймов, и при этом срабатывает до window.onload . Поэтому будем использовать и этот способ. Для тех браузеров, в которых не сработали предыдущие методы (например, очень старый Firefox), добавим вызов обработчика при событии window.onload . Для совсем древних браузеров, в которых нет addEventListener/attachEvent , вы можете раскомментировать и строчку (4.1). При этом, разумеется, возможен конфликт с другими обработчиками onload .

Этот код взят, с небольшими упрощениями, из библиотеки jQuery, а методы придуманы различными авторами.

Код из примера выше позволяет навешивать только один обработчик. Для поддержки нескольких — добавим дополнительную обертку:

readyList = [] function onReady(handler) { if (!readyList.length) { bindReady(function() { for(var i=0; i> * меньшее удобство, нужен дополнительный код в HTML

Чем удобство добавления скрипта в начало страницы отличается от удобства добавления скрипта в конец страницы? И какой нужен дополнительный код в HTML?

В конце HTML нужен тэг script с вызовом ready .

При использовании функции bindReady — такой скриптовой вставки не нужно.

Если подключать все скрипты в конце страницы, то вообще никаких ready не надо, и код сильно упрощается.

Автор: Kiranatus (не зарегистрирован), дата: 1 сентября, 2010 — 17:32

Точно! Или, добавить проверку переменной gbLoaded в функции, которым нужна полная загрузка документа, а в конце HTML просто добавить:

gLoaded = true;

Таким образом не придётся ждать загрузки картинок.

Источник: http://javascript.ru

Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий

Вы должны быть авторизованы, чтобы разместить комментарий.