ładowanie zdjęć

Witam mam problem z ładowaniem zdjęć, a dokładniej z ich pozycjonowaniem. Nie wiem jak zrobić, żeby ikona ładowania znikała dopiero po pełnym załadowaniu zdjęcia.

$(document).ready(function() {
	$('a').click(function() {
		if($('a').attr('rel') == 'jQueryLightbox') 
			jQueryLightbox(this);
	});

});

var loading = '<img src="images/jquery-lightbox/loading.gif" alt="Loading..." />';
var next = '';
var prev = '';
var temp = '';

function jQueryLightbox(obj) {
	img = $(obj).attr('href').replace('#', '');
	$.ajax({
		type:'GET',
		url:img,
		timeout:10000,
		beforeSend:function(html) {
			$('body').append('<div class="jQueryLightbox">' + loading + '</div>');			
			//position x
			$('.jQueryLightbox').css('left', (($(document).width() / 2) - $('.jQueryLightbox').width()) + 'px');
			//position y
			$('.jQueryLightbox').css('top', (($(document).height() / 2) - $('.jQueryLightbox').height()) + 'px');
			
			$('.jQueryLightbox').fadeIn('slow', 'linear');
		},
		success:function(html) { 
			$('body .jQueryLightbox').remove();
			$('body').append('<div class="jQueryLightbox"><img src="' + img + '" alt="" /></div>');
			
			//position x
			$('.jQueryLightbox').css('left', ((($(document).width() - $('.jQueryLightbox').width())) / 2) + 'px');
			//position y
			$('.jQueryLightbox').css('top', ((($(document).height() - $('.jQueryLightbox').height())) / 2) + 'px');
			temp = '';			
		},
		error:function(html) {
			
		}
	});
}

wtf? ślesz zapytanie ajax do obrazka? co to w ogóle za dziwne cuda? nie lepiej po kliknięciu pokazać (przygotowany przy inicjalizacji skryptu, a nie po każdym klinięciu jak tutaj!) holder, w nim animację gif, oraz preloadować obrazek jedną z metod, które możesz sobie wygooglować, a po zakończeniu preloadingu pokazać obrazek i ukryć gifa)?

zaglądnij w źródła innych lightboxów