iMasters Fóruns: Usar window.onload? Pra Que Esperar Tanto? Use O Onready! - iMasters Fóruns

Ir para

Bom uso da área



Atenção:
Este subfórum é destinado apenas para postagem de artigos, tutoriais e matérias sobre javascript.
Não é permitido a abertura de tópicos com dúvidas. Para isso, use o Fórum de javascript.
Página 1 de 1
  • Novo tópico
  • Responder

Usar window.onload? Pra Que Esperar Tanto? Use O Onready! on ready é mais rápido: não aguarda toodas as imagens.

#1 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 21 novembro 2007 - 09:27

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

#2 Membro offline   Gabriel™ Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 4
  • Cadastrado: 05-maio 07

Postou 23 dezembro 2007 - 19:28

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

#3 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 07 março 2008 - 16:11

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);
 }
 
}


#4 Membro offline   berkowitz Ícone

  • Berkowitz - Movimentando idéias
  • Ícone
  • Grupo: Membros
  • Posts: 1038
  • Cadastrado: 16-julho 03
  • Sexo:Masculino
  • Localização:São Paulo - SP

Postou 10 abril 2008 - 15:38

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)

#5 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 27 maio 2008 - 11:37

Opa valeu ae, heeh
Mas voltei só pra dar um aviso: esse bixo parece que não está funcionando como o esperado em alguns casos não. Testem bem ao usá-lo. :joia:

Té mais povo.

#6 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 15 outubro 2008 - 10:58

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
}


#7 Membro offline   Mário Monteiro Ícone

  • Amo Você Fabíola. Ao seu lado tudo é perfeito.
  • Ícone
  • Grupo: Administradores
  • Posts: 29685
  • Cadastrado: 24-abril 03
  • Sexo:Masculino
  • Localização:Belém, Pará

Postou 15 outubro 2008 - 12:51

Muito bom Micox

Obrigado por compartilhar

Página 1 de 1
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)