Выдернул из jQuery реализацию обработчика события onDomReady. Для тех, кто не в курсе поясню, что это событие возникает, после того как весь html код страницы будет загружен браузером, но в отличие от window.load, срабатывает раньше того, как будут загружены все стили, скрипты, картинки и т.д. Т.е. если в своем JS вам надо провести какие-то манипуляции с DOM на странице до ее показа, то вам нужен именно этот метод. Вы, конечно, можете подключать jQuery целиком, и тогда в вашем распоряжении будет этот метод. К примеру при подключенном jQuery установить событие можно так
$(function(){
alert('Привет Мир!!!')
})
или так
$.ready(function(){
alert('Привет Мир!!!')
})
Но бывают такие проекты, где хоть и очень легкая библиотека будет лишней, и приходится изобретать велосипед.
Я фанат jQuery и считаю что ее исходный код приближен к идеальному, и лично я лучше точно не напишу. Поэтому когда мне понадобился метод onDomReady я просто позаимствовал его из этой библиотеки.
Вот и сам код
(function(){
var readyBound = false;
var bindReady=function(){
if ( readyBound ) return;
readyBound = true;
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
ready();
}, false );
} else if ( document.attachEvent ) {
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
ready();
}
});
if ( document.documentElement.doScroll && window == window.top ) (function(){
if ( isReady ) return;
try {
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
ready();
})();
}
if (window.addEventListener)
window.addEventListener('load', ready, false);
else if (window.attachEvent)
window.attachEvent('onload', ready);
else
window.onload=ready;
}
var isReady=false
var readyList= [];
var ready=function() {
if ( !isReady ) {
isReady = true;
if ( readyList ) {
var fn_temp=null
while(fn_temp=readyList.shift()){
fn_temp.call( document);
}
readyList = null;
}
}
}
domReady=function(fn) {
bindReady();
if ( isReady )
fn.call(document);
else
readyList.push( fn );
return this;
}
})();
Пользоваться этим очень просто
domReady(function(){
alert('Привет любитель готовых велосипедов!!!');
});
Кто не верит что это чудо работает посмотрите пример работы onDomReady
Комментарии
alert("yo") срабатывает ПОСЛЕ заргузки и CSS и картинок и прочего добра...
Не проще ли ДЕЙСТВИТЕЛЬНО не изобретать велик и просто подвесить body событие onload?
Эффект тот же))))
А вообще, если немного пофилосовствовать на тему начальной загрузки странички, то могу сказать следующее:
1. Браузерам в 21 веке абсолютно начхать где он встретит "script type='text/javascript'", хоть после "" и 100500 пробелов, хоть до "" - он выполнит ваш скрипт. В этом четко просматривается американский подход к делу и можно уйти от четкого и структурированого кода. И в принципе это не плохо, это облегчает жизнь. Так что если у вас не очень мудренные, простенькие скрипты, управляющие элементами DOM - просто пишите их перед закрывающим body, т.е. в конце странички. А если скрипты не взаимодействуют с элементами - то можно и в шапке... для красоты)))))