Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Короткий вариант domReady() (https://javascript.ru/forum/events/6682-korotkijj-variant-domready.html)

korzhik 15.12.2009 04:09

Короткий вариант domReady()
 
Собственно, только что идея появилась :)

function domReady(fn) {
	setTimeout(function(){
		document.body ? fn() : setTimeout(arguments.callee, 0);
	}, 0);
}


Имеет ли право на жизнь? Или есть какие-то подводные камни?

Gvozd 15.12.2009 04:23

масло-масляное
function domReady(fn) {
    setTimeout(function(){
        document.body ? fn() : domReady(fn);
    }, 0);
}

или вообще
function domReady(fn) {
    var timer=setInterval(function(){
        if(document.body) {clearInterval(timer);fn();}
    }, 13);//повысил интервал также
}

ИМХО код не имеет права на жизнь, из-за сомнительной кросбраузерности(не уверен что проверка одного только document.body будет достаточной)
к тому же лучше там, где это возможно, обходится без setInterval или setTimeout, дабы не давать бессмысленную загрузку на процессор

korzhik 15.12.2009 04:36

Хм, вот как раз вопрос "сомнительной кроссбраузерности" и интересует. Бегло проверил на 9 и 10 опере, 8,7,6 ие, 4 хроме и фф 2, 3 - работает.

Про таймеры согласен, но в противном случае - много больше кода получается.

var k = 0;
function domReady(fn){
    setTimeout(function(){
        ++k;
        document.body ? fn() : setTimeout(arguments.callee, 0);
    }, 0);
}

domReady(function(){
    document.getElementById('asd').style.color = '#f00';
    alert(k) // 1 везде выдает
})


Причем не на пустой странице

Gvozd 15.12.2009 05:21

Цитата:

Сообщение от korzhik
много больше кода получается.

всьма сомнительная выгода
лично я, если мне нужен компактный и кросбраузерный код для мелких скриптов, выдергиваю его из jQuery
кросбраузерней чем у них я не напишу, и в том, что я смогу написать компактней при тех же требованиях кроссбраузерности, у меня сомнений не возникает
вот, код, который получился после выдирания:
(function(){
var readyBound = false;
var bindReady=function(){
	if ( readyBound ) return;
	readyBound = true;

	// Mozilla, Opera and webkit nightlies currently support this event
	if ( document.addEventListener ) {
		// Use the handy event callback
		document.addEventListener( "DOMContentLoaded", function(){
			document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
			ready();
		}, false );

	// If IE event model is used
	} else if ( document.attachEvent ) {
		// ensure firing before onload,
		// maybe late but safe also for iframes
		document.attachEvent("onreadystatechange", function(){
			if ( document.readyState === "complete" ) {
				document.detachEvent( "onreadystatechange", arguments.callee );
				ready();
			}
		});

		// If IE and not an iframe
		// continually check to see if the document is ready
		if ( document.documentElement.doScroll && window == window.top ) (function(){
			if ( isReady ) return;

			try {
				// If IE is used, use the trick by Diego Perini
				// [url]http://javascript.nwbox.com/IEContentLoaded/[/url]
				document.documentElement.doScroll("left");
			} catch( error ) {
				setTimeout( arguments.callee, 0 );
				return;
			}

			// and execute any waiting functions
			ready();
		})();
	}

	// A fallback to window.onload, that will always work
	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= [];
	// Handle when the DOM is ready
var ready=function() {
		// Make sure that the DOM is not already loaded
		if ( !isReady ) {
			// Remember that the DOM is ready
			isReady = true;

			// If there are functions bound, to execute
			if ( readyList ) {
				// Execute all of them
				var fn_temp=null
				while(fn_temp=readyList.shift()){
					fn_temp.call( document);
				}

				// Reset the list of functions
				readyList = null;
			}

			// Trigger any bound ready events
			//jQuery(document).triggerHandler("ready");//???
		}
	}
/////------------------------------------------------
domReady=function(fn) {
		// Attach the listeners
		bindReady();

		// If the DOM is already ready
		if ( isReady )
			// Execute the function immediately
			fn.call(document);

		// Otherwise, remember the function for later
		else
			// Add the function to the wait list
			readyList.push( fn );

		return this;
	}
	
})();

ну, вроде достаточно гладко выдрал, и все обернул в замыкание
вызывать через
domReady(function(){
alert('OK');
});

если вас интересует в первую очередь мнимый выигрыш от минимизации кода, можете не использовать
тогда я просто оставлю этот тут для следующих поколений

Kolyaj 15.12.2009 09:26

Свойство document.body становится доступным сразу после открытия тега body, а не после закрытия. Так что ваше domReady будет срабатывать сильно раньше.

korzhik 15.12.2009 09:30

Спасибо, это и хотел услышать:)

B~Vladi 16.12.2009 11:10

Цитата:

Сообщение от Kolyaj
Свойство document.body становится доступным сразу после открытия тега body, а не после закрытия.

И html?

Kolyaj 16.12.2009 11:14

Цитата:

Сообщение от B~Vladi
И html?

document.documentElement то есть? А попробовать? :)

B~Vladi 16.12.2009 11:33

Вот гадство:(
Самый короткий и кроссбраузерный способ узнать DOMReady - поместить скрипт перед </body>:)

Kolyaj 16.12.2009 11:37

Почему гадство? Я всегда так и делаю.


Часовой пояс GMT +3, время: 22:18.