Preloader de imagens

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