Jump to content

  2. →
  3. →
  4. →

Photo

Sistema Ajax

Started By nicollas_fr, 20/07/2006, 22:53

  • Faça o login para participar
10 replies to this topic

#1 nicollas_fr

nicollas_fr

    Look For The Power

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 20/07/2006, 22:53

Opa...
Sou novo no forum e queria saber como eu posso fazer pra que Apareça uma imagem e uma progressbar, ai quando acabar de carregar o site ai exibe o site. em quanto nao carregar o site todo nao o exibe
Acho que deve ser feito com ajax neh?

E também como ter o Menu de botao direito me falaram que usa ajax pra isso também...
Aguardo...

#2 Paulo André

Paulo André

    Why so serious?

  • Ex-Admins
  • 5114 posts
  • Sexo:Masculino
  • Localidade:Belo Horizonte - MG
  • Interesses:O.Q.F.J.?

Posted 21/07/2006, 07:35

Um pré-load de imagem não necessariamente se faz em Ajax, você pode fazer simplesmente assim:
<script>
var carregar;
window.onload = function preLoad() {
  carregar = new Image();
  carregar.src = "imagem.jpg";
  setTimeout( "verificaCarregamento()", 100 );
}

function verificaCarregamento() {
  if( carregar.complete ) {
	document.getElementById( "foto" ).innerHTML = "<img src=\"" + carregar.src + "\">";
  } else {
	setTimeout( "verificaCarregamento()", 100 );
  }
}

</script>

  <div id="foto">Carregando...</div>

PS. Aprendi ontem com o Cristiano.. :P

Flws...
^_^Até mais
Paulo André G Rodrigues,
ex-administrador Fórum WMO.

www.CanalDev.com.br

#3 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 21/07/2006, 09:26

Vale lembrar que uma imagem possui o evento load (onload), você pode atribuir uma função qualquer este evento e, só quando a imagem for carregada é que ele será disparado.

Exatamente igual a <body>. (window.onload...)
Klaus Paiva
Conheça também: Taperás

#4 nicollas_fr

nicollas_fr

    Look For The Power

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 21/07/2006, 22:24

Frenesi:
Valeu, Funcionou mais a imagem que aparece que diz que está carregando. fica e não some +

#5 Allan Carvalho

Allan Carvalho

    Òó :: ^^

  • Usuários
  • 471 posts
  • Sexo:Masculino
  • Localidade:Campinas - SP
  • Interesses:Um PC novo e rápido. ^^

Posted 22/07/2006, 00:31

Não, não....

O código é perfeito, aliás, parabéns ao Cristiano. (y) ;)


Você não se esqueceu de alterar o ID ou alterou errado na linha abaixo:

document.getElementById( "foto" ).innerHTML = "<img src=\"" + carregar.src + "\">";




Até mais. (y) ;)


Fui. ^_^
Nome: Allan V. Ferreira de Carvalho.
Localidade: Campinas - SP
Linguagem de desenvolvimento: XHTML | CSS (Tableless) | JavaScript | AJAX | PHP
Contatos: brkamikasecps@gmail.com | brkamikasecps@hotmail.com

Posted Image

#6 nicollas_fr

nicollas_fr

    Look For The Power

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 22/07/2006, 09:43

Eae,
Como eu disse anteriormente aparece o texto "Carregando..." ai se eu colocar a img no local ai mostra a img, mais monstrando qualquer um dos 2 eles nao somem ficam la... ai exibe o site e eles ainda ficam não sai..
Talvez seja o WebServer que estou usando. Porque eu fiz ele no VB então tenha que adicionar algo nele. Creio que tenha neh

Olhem ai: Site

Tambem tem o Codigo de como coloquei abaixo:
<script>
var carregar;
window.onload = function preLoad() {
carregar = new Image();
carregar.src = "load.jpg";
setTimeout( "verificaCarregamento()", 100 );}
function verificaCarregamento() {
if( carregar.complete ) {
document.getElementById( "foto" ).innerHTML = "<img src=\"" + carregar.src + "\">";  }
else {
setTimeout( "verificaCarregamento()", 100 );  }}
</script>
<div id="foto">Carregando...</div>



<link href="nd.css" rel="stylesheet" type="text/css">
<html>
<head>
<title>.: Net Down - Net Down :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ondragstart="return false"; onContextMenu="return false"; onSelectStart="return false" ><div id="background">
<table align="center" id="Table_01" width="801" height="1001" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="20"><img src="Imagens/Lay/logo.jpg" width="800" height="198" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="198" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="4"> </td>
		<td colspan="5" rowspan="4"><img src="Imagens/Lay/nd_slices_03.jpg" width="364" height="56" alt=""></td>
		<td colspan="9">
			<img src="Imagens/Lay/nd_slices_04.jpg" width="326" height="7" alt=""></td>
		<td colspan="3" rowspan="4"> </td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Imagens/Lay/usuario.jpg" width="62" height="22" alt=""></td>
	  <td colspan="7" rowspan="2" background="Imagens/Lay/bg_form.jpg"><form name="form" method="post" action="logar.php"><input name="usuario" id="usuario" type="text" class="usuario" /><input type="image" class="submit" src="Imagens/Lay/logar_1.jpg" alt="Logar" />
		  <input name="senha" id="senha" type="password" class="senha" /><input type="image"  class="submit" src="Imagens/Lay/logar_2.jpg" alt="Logar" />
		  </form></td>
		<td rowspan="2">
			<img src="Imagens/Lay/nd_slices_10.jpg" width="66" height="42" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td height="20">
			<img src="Imagens/Lay/senha.jpg" width="62" height="20" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="Imagens/Lay/nd_slices_15.jpg" width="326" height="7" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td rowspan="10"> </td>
		<td colspan="4">
			<img src="Imagens/Lay/menu_esquerda.jpg" width="160" height="41" alt=""></td>
		<td colspan="7" rowspan="3">
			<img src="Imagens/Lay/nd_meio.jpg" width="393" height="46" alt=""></td>
		<td colspan="7" rowspan="2">
			<img src="Imagens/Lay/menu_direita.jpg" width="166" height="42" alt=""></td>
		<td rowspan="10"> </td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="41" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Imagens/Lay/menu_esquerda-22.jpg" width="11" height="1" alt=""></td>
	  <td colspan="2" rowspan="6" bgcolor="#000000"><iframe AllowTransparency frameborder="0" width="100%" height="100%" src="menu_esquerda_ie.php"></iframe></td>
		<td>
			<img src="Imagens/Lay/menu_esquerda-24.jpg" width="10" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="8"> </td>
		<td rowspan="6">
			<img src="Imagens/Lay/nd_slices_25.jpg" width="10" height="560" alt=""></td>
		<td rowspan="6">
			<img src="Imagens/Lay/nd_slices_26.jpg" width="9" height="560" alt=""></td>
		<td colspan="5" rowspan="5" bgcolor="#000000"><iframe AllowTransparency frameborder="0" width="100%" height="100%" src="menu_direita.php"></iframe></td>
		<td rowspan="8">
			<img src="Imagens/Lay/nd_slices_28.jpg" width="7" height="679" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td rowspan="5">
			<img src="Imagens/Lay/nd_slices_29.jpg" width="2" height="556" alt=""></td>
		<td colspan="5" rowspan="3" bgcolor="#000000"><div id="meio" /><iframe AllowTransparency frameborder="0" width="100%" height="537" src="meio_ie.php" name="meio"></iframe></td>
		<td rowspan="5">
			<img src="Imagens/Lay/nd_slices_31.jpg" width="2" height="556" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="143" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="270" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="124" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="Imagens/Lay/nd_slices_36.jpg" width="389" height="19" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Imagens/Lay/nd_slices_37.jpg" width="139" height="17" alt=""></td>
		<td colspan="5">
			<img src="Imagens/Lay/nd_slices_38.jpg" width="150" height="17" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td colspan="16" bgcolor="#000000"><iframe AllowTransparency frameborder="0" width="100%" height="94" src="menu_baixo.php"></iframe></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="94" alt=""></td>
	</tr>
	<tr>
		<td colspan="16">
			<img src="Imagens/Lay/nd_slices_40.jpg" width="701" height="25" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>

		<td colspan="20">
		<center><? include "Sistemas/Statisticas/server_uptime.php"; ?></center>
			<img src="Imagens/Lay/copyright.jpg" width="800" height="25" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="39" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="133" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="55" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="164" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="62" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="64" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="44" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="53" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="66" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="Imagens/Lay/spacer.gif" width="42" height="1" alt=""></td>
		<td></td>
	</tr>
</table></div>
</body>
</html>

Aguardo e Obrigado pela atenção..

Edição feita por: nicollas_fr, 22/07/2006, 10:43.

#7 Allan Carvalho

Allan Carvalho

    Òó :: ^^

  • Usuários
  • 471 posts
  • Sexo:Masculino
  • Localidade:Campinas - SP
  • Interesses:Um PC novo e rápido. ^^

Posted 22/07/2006, 17:59

Tenta colocar depois do <body>:

<html>
<head>
<title>.: Net Down - Net Down :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="nd.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ondragstart="return false"; onContextMenu="return false"; onSelectStart="return false" >
<script>
var carregar;
window.onload = function preLoad() {
carregar = new Image();
carregar.src = "load.jpg";
setTimeout( "verificaCarregamento()", 100 );}
function verificaCarregamento() {
if( carregar.complete ) {
document.getElementById( "foto" ).innerHTML = "<img src=\"" + carregar.src + "\">"; }
else {
setTimeout( "verificaCarregamento()", 100 ); }}
</script>
<div id="foto">Carregando...</div>
... restante do código ...



OK? ;)


Até mais. ^_^
Nome: Allan V. Ferreira de Carvalho.
Localidade: Campinas - SP
Linguagem de desenvolvimento: XHTML | CSS (Tableless) | JavaScript | AJAX | PHP
Contatos: brkamikasecps@gmail.com | brkamikasecps@hotmail.com

Posted Image

#8 nicollas_fr

nicollas_fr

    Look For The Power

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 22/07/2006, 18:51

Mesmo assim continua o texto cara...

aquele 100 do GetElementBy eh algo relacionado a tempo?

De qualquer maneira vlw...

#9 Allan Carvalho

Allan Carvalho

    Òó :: ^^

  • Usuários
  • 471 posts
  • Sexo:Masculino
  • Localidade:Campinas - SP
  • Interesses:Um PC novo e rápido. ^^

Posted 22/07/2006, 19:10

Ah tá! Tá utilizando esse código no IE, certo?

Ok! ^_^

<html><head>
<title>.: Net Down - Net Down :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="nd.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ondragstart="return false"; onContextMenu="return false"; onSelectStart="return false" >
<script>
var carregar;
window.onload = function preLoad() {
carregar = new Image();
carregar.src = "load.jpg";
setTimeout( "verificaCarregamento()", 100 );}
function verificaCarregamento() {
if(carregar="complete") {
document.getElementById( "foto" ).innerHTML = "<img src=\"" + carregar.src + "\">"; }
else {
setTimeout( "verificaCarregamento()", 100 ); }}
</script>
<div id="foto">Carregando...</div>
... restante do código ...



O problema é no carregar.complete, pois pela lógica do IE ele espera um valor atribuido.

Assim:

carregar.complete é igual a que pra que eu rode essas funções? Não, não retornou nada, na verdade, nada foi atribuido. Certo vou acionar o "senão".


Agora sim! ;)


Até mais. ^_^

Edição feita por: invasoesdemaniacos, 22/07/2006, 19:12.

Nome: Allan V. Ferreira de Carvalho.
Localidade: Campinas - SP
Linguagem de desenvolvimento: XHTML | CSS (Tableless) | JavaScript | AJAX | PHP
Contatos: brkamikasecps@gmail.com | brkamikasecps@hotmail.com

Posted Image

#10 nicollas_fr

nicollas_fr

    Look For The Power

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 22/07/2006, 22:31

Definitivamente... agente fez algo pra esse cara pq ele nao que funcionar...
Agora o texto carregando... some ai ele carrega uma img so que nao a localiza ai fica aquele X de erro
so que carregar.src = load.jpg e a img eh load.jpg
não sei o que eh agora

Ow invasoesdemaniacos olha ai...
me add no msn nicollas_fricas@hotmail.com to online agora

Olha ae...
SITE

#11 Allan Carvalho

Allan Carvalho

    Òó :: ^^

  • Usuários
  • 471 posts
  • Sexo:Masculino
  • Localidade:Campinas - SP
  • Interesses:Um PC novo e rápido. ^^

Posted 22/07/2006, 23:51

Hehehe, verdade. Esqueci de fazer com uma imagem válida. ^_^

Bom... Já arrumei isso:

<script>
var imagem = "imagem.jpg";
var carregar = "";
window.onload = function preLoad() {
carregar = new Image();
carregar.src = imagem;
setTimeout( "verificaCarregamento()", 100 );}
function verificaCarregamento() {
if(carregar="complete") {
var carrega = imagem;
document.getElementById( "foto" ).innerHTML = "<img src=\"" + carrega + "\">"; }
else {
setTimeout( "verificaCarregamento()", 100 ); }}
</script>
<div id="foto">Carregando...</div>


A variável carregar está dando erro para o IE (não parei para pensar o porquê), então a solução foi atrubuir uma nova variável somente com o nome da imagem e se o carregamento estiver completo ele joga essa variável contendo o nome da imagem dentro de outra. ;)


Agora sem problemas.


Confirmo:

(y) Cross-browser


Belezera?


Ufa né?! ^_^



Até mais. ^_^

Edição feita por: invasoesdemaniacos, 22/07/2006, 23:52.

Nome: Allan V. Ferreira de Carvalho.
Localidade: Campinas - SP
Linguagem de desenvolvimento: XHTML | CSS (Tableless) | JavaScript | AJAX | PHP
Contatos: brkamikasecps@gmail.com | brkamikasecps@hotmail.com

Posted Image

Voltar para Ajax


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → Javascript / DOM / AJAX / ECMAScript
  4. → Ajax
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq