Preloader de Imagem com Ajax

[Paulo Freitas Nobrega 0]

Olá pessoal to com uma dificuldade aqui. É o seguinte, tenho um espaço no site onde vai ficar 5 pequenas imagens. Gostaria que enquanto estão carregando em vez de aparecer as imagens sendo carregadas, fique um gif no lugar até que elas carregue completamente. Bem a teoria eu sei mais ou menos:

 

Essa parte estou em dúvida:

Usarei o metodo ajax.open?

ajax.open("GET", "caminho da foto", true);

Essa parte eu sei fazer:

Enquanto estiver carregando apareça o gif

if(ajax.readyState != 4) { document.getElementById("imagem_gif").style.display="block"; } else {  document.getElementById("imagem_gif").style.display="none"; }

Aqui outra dúvida:

Devo usar o metodo ajax.status?

if(ajax.status == 200) { document.getElementById("imagem").style.display="block";}

Ou uso ajax.readyState?

if(ajax.readyState == 4) { document.getElementById("imagem").style.display="block"; }

Bem, alguém poderia dar uma ajuda? Explicação (um pequeno tuto só pra ter um idéia do ponto da onde começar), tutorial, link, qualquer coisa eu já ficarei muito grato!!!

 

O site onde ficarão as imagens: Projeto em Andamento

o gif que vou usar é esse:

[Wilker 3]

voce deve usar os 2:

 

if(ajax.readyState == 4) { //confirma que finalizou a requisicao  if(ajax.status == 200) { //confirma que a resposta chegou de forma correta	//acoes aqui  }}

quanto a imagem, no lugar de ficar alternando entre aparecendo/desaparecendo você pode ser mais simples:

 

primeiro voce coloca todas as imagens la pra serem esse seu loading ai:

 

<img src="loading.gif" id="img0" />

<img src="loading.gif" id="img1" />

<img src="loading.gif" id="img2" />

 

depois de ter as imagens, você faz o seguinte no java script:

 

Function.prototype.bind = function() {	var args = [];	for(var i = 0; i < arguments.length; i++)		args[i] = arguments[i];	var method = this; var context = args.shift();	return function() {		var a = [];		for(var i = 0; i < arguments.length; i++)			a[i] = arguments[i];		return method.apply(context, args.concat(a));	};};var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"];for(var i = 0; i < images.length; i++) {  var img = new Image();  img.onload = function(x) {	document.getElementById("img" + x).src = images[x];  }.bind(this, i);  img.src = images[i];}

pronto cara, ta pronto seu loader, e você nem precisa de ajax XD

[Paulo Freitas Nobrega 0]

Ainda sou meio leigo, tem como explicar :unsure:

primeiro voce coloca todas as imagens la pra serem esse seu loading ai:<img src="loading.gif" id="img0" /><img src="loading.gif" id="img1" /><img src="loading.gif" id="img2" />

Seria colocar normal no layout?Aonde eu colocaria o gif de carregamento? se já estiver no código tem como explicar, pq em primeira vista não to conseguindo achar!!!Já agradeço sua ajuda!

[Wilker 3]

sim, direto no codigo, naqueles blocos lá onde vai aparecer as imagens

[Paulo Freitas Nobrega 0]

Certo, última coisa, e o gif para quando o ajax.readyState != 4, onde devo coloco no código? se já não estiver lá!

[Wilker 3]

você não precisa de ajax para fazer isso cara, puro DHTML resolve ;)

[Paulo Freitas Nobrega 0]

Vlw consegui, eu estava me confundindo com a linha:

var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"];

para mim eu teria que incluir as imagens no layout e colocar um id pra elas, só depois que fui entender que era para ser assim:

 

var images = ["imagens/foto1.jpg", "imagens/foto2.jpg", "imagens/foto3.jpg"];

Mas agora deu certinho, muito obrigada Wilker http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[clagils 0]

desculpa entrar de bicao...mas a duvida esta em comendo...e se eu for fazer com jquery como fica?