Preloader de imagens

[hao 0]

Fala galera!

 

Esse tema ja esta manjado, mas estou com duvidas sobre o assunto! É o seguinte, tenho em uma pagina com fotos dos produtos, uma grande em cima e tres thumbs embaixo. Consigo fazer funcionar tranquilo, porem queria saber o seguinte:

 

- Sei colocar o gif carregando, mas queria saber como consigo saber quando já foi totalmente carregada a nova imagem para fazer uma transação, tipo fade, desaparecendo o gif carregando e aparecendo a imagem?

 

- Eu estou usando um script para carregar com ajax, consegui fazer esse esquema que citei em cima, mas não sei se é correto usar ajax para carregar imagens, o meu script ficou assim:

var nova_img = 'imagens/foto1.jpg';
			var nova_img_caminho = 'thumb.php?q='.nova_img;
			$.ajax({
				url: 'thumb.php', 
				type: 'GET', 
				data: 'x=200&q='+nova_img, 
				dataType: "image", 
				beforeSend: function() {
						$('#img_grande a img').hide().attr('src', '');
						$('#img_grande p').hide();
						$('#img_grande p.carregando').css({'line-height':'190px'});
						$('#img_grande p.carregando').fadeIn(300);
				}, 
				success: function(e) {
					$('p.carregando').fadeOut(300, function() {
						$('#img_grande a img').css({'margin-top':'0'}).attr('src', nova_img_caminho).fadeIn(300);
						$('#img_grande p[@class!="carregando"]').fadeIn(300);
					});
				}
			});

Então é isso, fiz varias pesquisas tentando encontrar um jeito de fazer esse preloader com JQuery, mas não encontrei nada que fosse o que eu preciso.

 

Obs.: O dataType no ajax, coloquei como 'image', chutei esse valor para ver se dava certo!

 

[]'s

[hao 0]

Achei o que precisava, não conhecia ainda o comando .complete, agora já sei como fazer! Ficaria mais ou menos assim:

 

if (imagem.complete) {
	   // executa os comandos...
}

[]'s