Ir para conteúdo

Arquivado

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

fekz

Texto antes do background

Por , em Desenvolvimento frontend

Recommended Posts

Édipo Costa Rebouças    0

Édipo Costa Rebouças
Postado

iai fekz, você usa o imaster também?...

 

Respondendo sua dúvida, esse carregamento até queé bom, funciona como uma barra de load natural para o user, mas se você quiser realmente que só apareca as coisas quando tiver tudo carregado... você deve deixar o body como display: none no css, no javascript dar display:block no onload... segue js

 

<script type="text/javascript">
window.onload = function(){
	document.getElementByTagName("body").style.display = "block";
}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

fekz    0

fekz
Postado

E ai cara,

 

Uso sim, ehehhee.

Valeu aí pela resposta, realmente não tinha pensado nisso.

 

Engraçado que no FF abre tudo junto, só o IE mesmo que demora pra abrir as coisas.

Por mim ia assim mesmo, mas o cliente pediu.

 

Vou testar e já te falo se deu certo.

 

Obrigado =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

fekz    0

fekz
Postado

E ai cara.. não funfou olha: Código da pagina toda:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<style>
body{display: none;}
</style>
<script type="text/javascript">
window.onload = function(){
	document.getElementByTagName("body").style.display = "block";
}
</script>
</head>

<body>
<div id="container">
<div id="texto">
<p>Finalmente uma novidade que vai dar o destaque e o glamour
que o seu evento merece. Uma revista exclusiva com a cobertura completa
deste dia importante. Fotos inéditas e reportagens mostrando
os bastidores da festa, detalhes dos vestidos e a alegria dos convidados,
tudo isto feito por profissionais do mercado publicitário e jornalístico
com a qualidade e o carinho que uma data como esta merece.<br /><br />

São revistas a partir de 12 páginas e 50 exemplares
de tiragem mínima. Mas você monta a revista da forma
que quiser, com quantas páginas quiser e imprime
a quantidade que quiser. Transforme seu casamento, debut,
foramatura, batizado, bar mitzvá e eventos empresarias em
um evento inesquecível.</p>
</div>
<div class="destaqueRed">
<p>REVISTA PERSONALIZADA.<br />
PORQUE VOCÊ TAMBÉM<br />
É UMA ESTRELA.</p>
</div>
<div class="destaqueBlack">
<p>LIGUE OU MANDE E-MAIL
E SOLICITE ORÇAMENTO
	DETALHADO</p>
</div>
<div class="email">
<p>E-mail: <a href="mailto:skc@skc.com.br">skc@skc.com.br</a></p>
</div>
</div>
</body>
</html>

 

 

 

Tentei assim tb:

 

 

<script>
function carregaImagem(){
document.getElementsByTagName("body").style.display = "block";
}
window.onload = carregaImagem();
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Édipo Costa Rebouças    0

Édipo Costa Rebouças
Postado

estranho, era para funcionar.... ultima tentativa

 

coloca um img com o src igual ao desse fundo, de um id pra ele, e deixe o oculto.

 

no js:

 

 

 

Ícone do grupo

 

Grupo: Membros

Posts: 65

Registrado: 24/03/2009

Membro N°: 104.310

 

 

 

 

<script type="text/javascript" defer="defer">

document.getElementById('idDoImg').onload = function(){

document.body.style.display = "block";

}

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

fekz    0

fekz
Postado

Ele até fica branco agora e depois carrega, antes tava com erro que não aparecia nada.

 

Mas mesmo carregando o texto continua aparecendo primeiro.

 

Tem que fazer um esquema de tipo enquanto a imagem não for carregada por completo, não mostrar nada eu acho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

fekz    0

fekz
Postado

Fiz uns testes, ele não deixa botar

Imagem.onload...

 

Acho que não é possivel usar esse evento com imagem

Compartilhar este post

Link para o post
Compartilhar em outros sites

fekz    0

fekz
Postado

O esquema é que window.onload é quando carrega a página, porém como a imagem ainda não está carregada ele continua aparecendo. Tá osso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

É meio obvio que o texto carregue antes da imagem... No firefox isso acontece também, mas como ele é mais rápido você nem percebe...

 

Existe algum problema em isso acontecer???

 

Se tiver, use o seguinte:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<title>Teste Preloader</title>
		<script type="text/javascript">
			function carregar(){
				var objLoader = document.getElementById("carregador_pai");
				objLoader.style.display = "none";
				objLoader.style.visibility = "hidden";
				
			}
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
			}
			#carregador_pai {
				display: block;
				width: 100%;
				min-height: 100%;
				height: 100%;
				height: auto !important; 
				position: absolute;
				background: #FFF;
				left: 0px;
				padding-top: 300px;
				height: 400px;
				z-index: 51;
			} #carregador {
				background-color: #069;
				border: #999 1px solid;
				color: #FFF;
				font: 10pt Arial, Helvetica, sans-serif;
				font-weight: bold;
				text-align: center;
				width: 200px;
				height: 16px;
				padding: 20px 0;
				position: fixed;
				left: 50%;
				top: 50%;
				margin: -28px 0 0 -100px;;
				z-index: 2;
			}
		</style>
	</head>
	<body onload="carregar();">
		<div id="carregador_pai">
			<div id="carregador">Carregando...</div>
		</div>
		<img src="imagem.jpg" alt="Imagem" width="1280" />
	</body>
</html>

Compartilhar este post

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

Informação importante

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

  Aceito