2008-06-05
onReady
Сегодня клиенты пожаловались что если что нибудь на странице не загрузилось то не работатет часть JavaScript'овского функционала - конкретно у них не сработала загрузка видео с ютуба - чето последнее время у них не быстро там все работает. Просто основная логика на странице подключается с использованием события onLoad - в принципе штука не обязательная в человечьих браузерах, но вот в Эксплорере при попытки поменять что либо до этого события возникает очень плохая ошибка.
Беда в том что onLoad возникает когда все изображения и все связные документы подгружены и если например одно из изображения подгружается с другого сервера, который умер, то ждать этого события придется довольно долго иногда несколько минут, и были случаи что событие так и не наступало...
Оказывается вносить изменения в объектную модель браузера можно и до возникновения события onLoad, т.е. когда не все изображения еще подгружены
ниже привожу функцию для отслеживания момента когда в браузере становится возможным вносить изменения в объектную модель документа. Идея позаимствована из JQuery
/**
* faster way to load content in browser idea taken frin JQuery
* this allows do not wait until data will be completely loaded
* seems only opera can allow load faster using this function -
* though in JQuery they say it's supported...
*/
//alert(document.addEventListener);
function bindReady(){
if ( bindReady.readyBound ) return;
bindReady.readyBound = true;
if (document.addEventListener){
document.addEventListener( "DOMContentLoaded", bindReady.ready, false );
}
// Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
// If IE is used and is not in a frame
// Continually check to see if the document is ready
if ( Object.isIE && window == top ) (function(){
if (bindReady.isReady) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
bindReady.ready();
})();
if ( Object.isSafari || Object.isOpera ) {
var numStyles;
(function(){
if (bindReady.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) {
setTimeout( arguments.callee, 0 );
return;
}
bindReady.ready();
})();
}
}
bindReady.readyBound = false;
bindReady.isReady = false;
bindReady.ready = function(){
bindReady.isReady = true;
var i;
for (i=0;i
Тестировал в IE6/IE7, Safari, Opera, FF. Не нравится только как работает в Опере - там скрипт срабатывает позже onLoad, в остальных браузерах гораздо раньше
разрешены только теги br, font, span, p, strong, u, p, blockquote, a, div, img - остальные будут безжалостно удаляться
комментарии: