JavaScript onReady

Вступление

Стандартный обработчик событий JavaScript document.onLoad проигрывает в событии DOMContentLoaded. Событию DOMContentLoaded не нужно ждать полной загрузки страницы в отличие от onLoad.

Событие onLoad ждет когда загрузятся все изображения, все счетчики и прочая анимация, тогда как DOMContentLoaded ждет когда будет загружена верстка страницы.

bindReady, onReady

Создадим 2 функции bindReady(handler) и onReady(handler). Сразу оговорюсь, автора этих функции я не знаю, но в интернете эти эти функции пользуются большим спросом при разработке сайтов использующих JavaScript.

/** * Функция bindReady - добавляет новый handler в событие загрузки страницы * */ function bindReady(handler) { var called=false; function ready() { if(called) { return; } called = true; handler(); } if (document.addEventListener) { document.addEventListener("DOMContentLoaded", function() { ready(); },false); } else if (document.attachEvent) { if (document.documentElement.doScroll && window==window.top) { function tryScroll() { if (called || !document.body) return; try { document.documentElement.doScroll("left"); ready(); } catch(e) { setTimeout(tryScroll,0); } } tryScroll(); } document.attachEvent("onreadystatechange",function() { if(document.readyState==="complete") ready(); }); } if (window.addEventListener) window.addEventListener('load',ready,false); else if (window.attachEvent) window.attachEvent('onload',ready); } readyList=[]; /** * Функция onReady - добавляет handler в * */ function onReady(handler) { if(!readyList.length) { bindReady(function() { for(var i=0;i<readyList.length;i++) { readyList[i](); } }) } readyList.push(handler) }

Пример

Использовать функции достаточно просто: в любом месте страницы вызывается функция onReady(function(){/*Набор операций*/}). После того как верстка страницы будет полностью загружена (НЕ ИЗОБРАЖЕНИЯ, НЕ ФЛЭШ-РОЛИКИ, А ИМЕННО ВЕРСТКА), выполнятся вписанные операции в функцию onReady.

Смотрите онлайн пример на сайте.

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JavaScript OnReady</title> <script type="text/javascript" src="onReady.js"></script> <script type="text/javascript"> function OR_Alert() { document.getElementById('textLayer').innerHTML += 'Запустили функцию OR_Alert(). JavaScript - полезная штука!<br>'; } function OR_helloWorld() { document.getElementById('textLayer').innerHTML += 'Запустили функцию OR_helloWorld(). Привет мир!<br>'; document.getElementById('textLayer').innerHTML += 'Вызывать функцию можно где угодно и когда угодно!<br>'; } onReady(function(){OR_Alert()}); </script> </head><body> <h1>JavaScript onReady</h1> <p>Открой исходный код страницы и станет все понятно.</p> <p><a href="onReady.js">Исходный код JavaScript onReady</a></p> <script type="application/javascript"> onReady(function(){OR_helloWorld()}); </script> <div id="textLayer"></div> </body></html>

Результат

JavaScript onReady

Открой исходный код страницы и станет все понятно.

Исходный код JavaScript onReady Запустили функцию OR_Alert(). JavaScript — полезная штука!
Запустили функцию OR_helloWorld(). Привет мир!
Вызывать функцию можно где угодно и когда угодно!

Опять же советую посмотреть онлайн пример на сайте.

Категории

ПрограммированиеJavaScriptСобытия

Читайте также

Комментарии