DOMContentLoaded
щас разбираюсь с событием DOMContentLoaded по этой статье http://javascript.ru/tutorial/events/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
*/
}
не пойму почему в старых ИЕ он срабатывает после полной загрузки страницы, как я понял функция tryScroll , должна срабатывает до загрузки картинок? Почему для браузеров которые не поддерживают DOMContentLoaded , сделать добавление document.body.appendChild(), если боди еще не загрузился то откладывать повторную попытку timeout? Помогите разобратся. |
неужели такой сложный вопрос?
|
Цитата:
Цитата:
|
Цитата:
вот что получилось
<!DOCTYPE HTML>
<html>
<head>
<script>
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.innerHTML = 'handler()';
scr.id = 'DomLoadedScript';
(function body_end(){
try {
document.body.appendChild(scr);
} catch(e){
setTimeout(body_end,0);
}
}());
</script>
</head>
<body>
<script >
function handler(){
alert('готов');
}
</script>
<img src="http://worldoftanks.ru/dcont/fb/media/batchat_ru_june_clear/1920x1200.jpg">
<img id="img" src="http://wallpaper.goodfon.ru/image/302908-2880x1800.jpg"/>
</body>
</html>
|
блин лоханулся, не работает старых ИЕ =)
сам ответил на свой вопрос(почему не этот вариант не используется) |
Цитата:
получилась такая простенькая кроссбразуерная функция
function ready(fnc){
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',fnc,false);
} else {
(function body_end(){
try {
document.body.innerHTML
fnc();
} catch(e){
setTimeout(body_end,0);
}
}());
}
}
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
это легко проверить:
<body>
<script>
alert( document.body.innerHTML ); // хотя документ еще не сформирован
</script>
<div></div>
</body>
увидим лишь то что идет до тега scriptПоэтому этот вариант никто и не использует, потому как он не гарантирует полной загрузки документа. Это вы сможете ощутить при огромном количестве тегов на странице.. |
да, я до этого додумался уже, только почему то забыл написать(сел в WOT поиграть:))
вот что мне пришло на в голову
<!DOCTYPE HTML>
<html>
<head>
<script>
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.id = 'DomLoadedScript';
(function body_end(){
try {
document.body.appendChild(scr);
alert(document.body.innerHTML);
} catch(e){
setTimeout(body_end,0);
}
}());
</script>
</head>
<body>
<script >
function handler(){
alert('готов');
}
</script>
<img src="http://worldoftanks.ru/dcont/fb/media/batchat_ru_june_clear/1920x1200.jpg">
<img id="img" src="http://wallpaper.goodfon.ru/image/302908-2880x1800.jpg"/>
</body>
</html>
переделал немного совю первую функцию, в боди можно добавить только после полной загрузки=) |
Цитата:
<body>
<script>
document.body.appendChild( document.createElement('b') );
alert( document.body.innerHTML );
</script>
<div></div>
<script>
alert( document.body.innerHTML );
</script>
</body>
в потоке можно делать что угодно |
cyber, вот на твоем примере:
<!DOCTYPE HTML>
<html>
<head>
<script>
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.id = 'DomLoadedScript';
(function body_end(){
try {
document.body.appendChild(scr);
alert(document.body.innerHTML);
} catch(e){
setTimeout(body_end,0);
}
}());
</script>
</head>
<body>
<script >
function handler(){
alert('готов');
}
</script>
<script>
for( var i = 0; i < 10000; i++ ) {} // просто задержка, вместо задержки может быть тысяча тегов иль еще чего.
</script>
<img src="http://worldoftanks.ru/dcont/fb/media/batchat_ru_june_clear/1920x1200.jpg">
<img id="img" src="http://wallpaper.goodfon.ru/image/302908-2880x1800.jpg"/>
</body>
</html>
в результате видим алерт с содержимым:
<script>
function handler(){
alert('готов');
}
</script>
<script>
for( var i = 0; i < 10000; i++ ) {} // просто задержка, вместо задержки может быть тысяча тегов иль еще чего.
</script><script type="text/javascript" id="DomLoadedScript"></script>
|
у меня такой алерт
<script>
function handler(){
alert('готов');
}
</script>
<script>
for( var i = 0; i < 10000; i++ ) {} // просто задержка, вместо задержки может быть тысяча тегов иль еще чего.
</script>
<img src="http://worldoftanks.ru/dcont/fb/media/batchat_ru_june_clear/1920x1200.jpg">
<img id="img" src="http://wallpaper.goodfon.ru/image/302908-2880x1800.jpg">
<script type="text/javascript" id="DomLoadedScript"></script>
|
потом по тестю на большой странице.
а какие еще есть варианты для старых браузеров? |
Цитата:
|
Цитата:
И еще вопрос а нафига тебе это? То что давно всеми используется нормально работает. |
Цитата:
вот код со страницей что бы запустить http://learn.javascript.ru/play/Xegrjb. |
вот работает везде(покрайнимере я не нашел где не работате )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script >
var DOM = {}
function ready(){
if(!document.addEventListener){
document.addEventListener('DOMContentLoaded',DOM.loaded,false);
} else {
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.text = 'DOM.loaded()';
scr.id = 'DomLoadedScript';
(function body_end(){
try {
document.body.appendChild(scr);
} catch(e){
setTimeout(body_end,0);
}
}());
}
}
DOM.loaded = function (){
handler();
img_src();
}
ready();
</script>
</head>
<body>
<script >
function img_src(){
alert(document.body.innerHTML);
}
function handler(){
alert('готов');
}
</script>
<img src="http://worldoftanks.ru/dcont/fb/media/batchat_ru_june_clear/1920x1200.jpg">
<img id="img" src="http://wallpaper.goodfon.ru/image/302908-2880x1800.jpg"/>
</body>
</html>
|
Цитата:
function DOMReady( callback ) {
if ( document.readyState === "complete" ) {
return setTimeout( callback, 1 );
}
var loaded = function( doScroll ) {
if ( document.removeEventListener ) {
document.removeEventListener( 'DOMContentLoaded', loaded, false );
window.removeEventListener( 'load', loaded, false );
loaded = null;
callback();
} else if ( document.detachEvent ) {
if ( document.readyState === "complete" || doScroll === null ) {
document.detachEvent( 'onreadystatechange', loaded );
window.detachEvent( 'onload', loaded );
loaded = null;
callback();
}
}
}
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", loaded, false );
window.addEventListener( "load", loaded, false );
} else if ( document.attachEvent ) {
document.attachEvent( "onreadystatechange", loaded );
window.attachEvent( "onload", loaded );
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch( _e_ ) {}
if ( document.documentElement.doScroll && toplevel ) {
var check = function() {
if ( !loaded ) return;
try {
document.documentElement.doScroll( "left" );
} catch( _e_ ) {
setTimeout( check, 0 );
return;
}
loaded( null );
}
check();
}
}
}
|
devote,сенк щас посмотрим что и как=)
|
и снова не работает в ие=)
|
Цитата:
|
Цитата:
работает, теперь можно идти спать, а завтра разберусь=) кстати , а почему этот велосипед плохой http://javascript.ru/forum/events/29...tml#post188682 |
сел разбирать твой код, и не могу понять зачем юзать onreadystatechange
если оно срабатывает того когда и onload? |
Цитата:
|
Цитата:
все зависит от политической ситуации в зимбабве ?=) а для чего это toplevel = window.frameElement == null; |
Цитата:
|
Цитата:
я не совсем понял что возвращает свойство frameElement , прочитал в нескольких источниках но так и не понял .сколько не запускал оно возвращает null , тогда зачем оно? или это проверка скрипт запускают в фрейме или нет? |
Цитата:
|
| Часовой пояс GMT +3, время: 11:05. |