Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

micox

Usar window.onload? Pra Que Esperar Tanto? Use O Onready!

Por , em Javascript

Recommended Posts

micox    2

micox
Postado

Fonte: Evento body on ready sem o uso de libs

 

Bom, grande parte das frameworks possui um método nativo incrivelmente útil chamado "On Ready".

Você já o conhece?

 

[...] Ready é semelhante ao onload do body, porém ele não espera carregar imagens e objects, ou seja, assim que estiver carregado todo o HTML ela é executada! Muito útil! [...] - jQuery Introdução - Felipe Diesel

 

[...]onReady é um método automaticamente chamado quando o DOM estiver completamente carregado, garantindo que todos os elementos referenciados na sua aplicação estarão disponíveis quando o script rodar. [...] ( Introdução à bibliteca EXTjs - Fábio Vedovelli )

 

 

Nós usamos constantemente o 'window.onload' ou o 'body.onload' pra dizer que devemos iniciar a execução do nosso script. Porém, o evento onload espera tooooooda a tonelada de imagens/objetos/etc serem carregados antes de ser disparado.

Carambola, na imensa maioria das vezes nós precisamos apenas que os elementos HTML estejam carregados. É isso que o on ready faz! Que legal, dãã!

 

Em muitas bibliotecas este evento já está incluso (Mootools, EXTjs e jQuery por exemplo), porém quem não usa bibliotecas ou cujas bibliotecas não tem o onready ficam a ver navios.

Tadáaaa: o Mico tem a solução!

 

"Chega de papo mico, você nunca foi de papo. Mostra logo um exemplo e o maldito script pra onload pra quem não usa bibliotecas."

 

Editado dia 28/05/2008 - ATENÇÃO: Este meu código parece não funcionar bem sempre. Teste ele direito antes de usar, se ele não funcionar, bem, não use... Mas não me xingue ;)

 

<script>
//vai funcionar rapidão pois não precisa esperar a imagem, só o carregamento do HTML
bodyOnReady(function(){
 alert('bodyOnReady rapidão após o DOM ter carregado ' + document.getElementById('teste').innerHTML)
})

//vai funcionar beleza, mas só depois que tooodos os elementos forem carregados
window.onload = function(){
 alert('window.onload. Só depois das imagens ' + document.getElementById('teste').innerHTML)
}

//vai dar erro pois o elemento 'teste' ainda não foi criado
 alert('alert simples ' + document.getElementById('teste').innerHTML)
 
</script>
<body onload="alert('onload do body. Só depois das imagens ' + document.getElementById('teste').innerHTML)">
<img src='http://img119.imageshack.us/img119/4050/no20matinhoue1.jpg' alt='imagem (relativamente) grande' />
<div id='teste'>conteúdo da div</div>
</body>

Entenderam a parada aí? Pois é.

 

"Mas cadê a função bodyOnReady Mico? A parada aí não funcionou pois tá faltando a função bodyOnReady" - Calma, está abaixo. É só adicioná-la em seu script e usar conforme a sintaxe passada no exemplo acima.

 

(edit 15-10-08 - atualizada, a versão anterior tava meio bugada)

function bodyOnReady(func){
//by Micox - based in jquery bindReady and Diego Perini IEContentLoaded
	//flag global para indicar que já rodou e function que roda realmente
	done = false
	init = function(){ if(!done) { done=true; func() } }
	var d=document; //apelido para o document
	//pra quem tem o DOMContent (FF)
	if(document.addEventListener){ d.addEventListener("DOMContentLoaded", init, false );}
	
	if( /msie/i.test( navigator.userAgent ) ){ //IE
		(function () {
			try { // throws errors until after ondocumentready				
				d.documentElement.doScroll("left");
			} catch (e) {
				setTimeout(arguments.callee, 10); return;
			}
			// no errors, fire
			init();
		})();
	}
	if ( window.opera ){
		d.addEventListener( "DOMContentLoaded", function () {
			if (done) return;
			//no opera, os estilos só são habilitados no fim do DOMready
			for (var i = 0; i < d.styleSheets.length; i++){
				if (d.styleSheets[i].disabled)
					setTimeout( arguments.callee, 10 ); return;
			}
			// fire
			init();
		}, false);
	}
	if (/webkit/i.test( navigator.userAgent )){ //safari's
		if(done) return;
		//testando o readyState igual a loaded ou complete
		if ( /loaded|complete/i.test(d.readyState)===false ) {
			setTimeout( arguments.callee, 10 );	return;
		}
		init();
	}
	//se nada funfou eu mando a velha window.onload lenta mesmo
	if(!done) window.onload = init
}

Várias tentativas de fazer o onready também estão disponíveis na net se quiserem testar. Esta aqui é só a minha versão (meio gambiarra pra variar).

 

Só testei no IE6, FF2 e OP9 e em poucas situações. Em caso de bug, não esqueçam de me avisar. Em caso de melhorias, manda ae.

 

"Obrigado senhor Mico, o senhor salvou minha vida. Agora meu script não precisa aguardar minhas cinqüenta mil imagens serem carregadas antes de começar a rodar".

 

Té a próxima, malucada.

El Micox - Resultado! Concursos - Shopping Resultado - Concurso Ministério da Fazenda

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gabriel™    0

Gabriel™
Postado

Em caso de bug, não esqueçam de me avisar. Em caso de melhorias, manda ae.

 

O tópico é antigo mas o Sr. disse então lá vai :P

 

function bodyOnReady(func)
{
	if(document.body == null)
	{
		return setTimeout(function(){ bodyOnReady(func) }, 100);
	}
	
	func();
}

Tá não faz nada de diferente a rotina mas o código tá mais "bonito" :huh: Bom, gosto de códigos bonitos então tá aí :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Opa valeu cara.

 

Eu e outros caras vimos que meu código tá dando bug em certas condições e online em um servidor.

Daí eu alterei para:

 

function bodyOnReady(func){
 //call the function 'func' when DOM loaded
 //Version 2.0 - 03/03/2008 - based on Jquery bindReady
 //by Micox - www.elmicox.com - elmicox.blogspot.com - webly.com.br
 //http://www.elmicox.com/2007/evento-body-onready-sem-o-uso-de-libs/
 
 if(document.addEventListener && navigator.appName.indexOf('Opera')<0){ //FF
 document.addEventListener( "DOMContentLoaded", func, false );
 
 }else if(navigator.appName.indexOf('Internet Explorer')>=0){ //IE
 try { // by Diego Perini - http://javascript.nwbox.com/IEContentLoaded/
  document.documentElement.doScroll("left");
  func();
 } catch( error ) {
  setTimeout( arguments.callee, 20 );
  return
 }
 
 }else if(navigator.appName.indexOf('Opera')>=0){
 document.addEventListener( "DOMContentLoaded", function () {
  for (var i = 0; i < document.styleSheets.length; i++){
   if (document.styleSheets[i].disabled) {
	setTimeout( arguments.callee, 0 );
	return;
   }
  }
  func();
 }, false);
 }
 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Prefiro baixar o JQuery e fazer um $(function() {});!

auhauhaAHaHAAAHhuahuAHAhuaa

 

Brincadeira Micolino... tu é danado rapá! DUCA esse teu esquema aí... vou até utilizar em alguns projetos (mantendo obviamente teus créditos como já fiz com outros! eheh)

 

ABRAX!!!!! B)

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Atualizado novamente:

 

function bodyOnReady(func){
//by Micox - based in jquery bindReady and Diego Perini IEContentLoaded
	//flag global para indicar que já rodou e function que roda realmente
	done = false
	init = function(){ if(!done) { done=true; func() } }
	var d=document; //apelido para o document
	//pra quem tem o DOMContent (FF)
	if(document.addEventListener){ d.addEventListener("DOMContentLoaded", init, false );}
	
	if( /msie/i.test( navigator.userAgent ) ){ //IE
		(function () {
			try { // throws errors until after ondocumentready				
				d.documentElement.doScroll("left");
			} catch (e) {
				setTimeout(arguments.callee, 10); return;
			}
			// no errors, fire
			init();
		})();
	}
	if ( window.opera ){
		d.addEventListener( "DOMContentLoaded", function () {
			if (done) return;
			//no opera, os estilos só são habilitados no fim do DOMready
			for (var i = 0; i < d.styleSheets.length; i++){
				if (d.styleSheets[i].disabled)
					setTimeout( arguments.callee, 10 ); return;
			}
			// fire
			init();
		}, false);
	}
	if (/webkit/i.test( navigator.userAgent )){ //safari's
		if(done) return;
		//testando o readyState igual a loaded ou complete
		if ( /loaded|complete/i.test(d.readyState)===false ) {
			setTimeout( arguments.callee, 10 );	return;
		}
		init();
	}
	//se nada funfou eu mando a velha window.onload lenta mesmo
	if(!done) window.onload = init
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

Muito bom Micox

 

Obrigado por compartilhar

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito