[jQuery] dynamic image preload
I'm trying to click on thumbnails in a <ul> and have the larger image
load in with a fade effect, clicking another will fade the old one out
and the new one it. With the code I have the initial load od the image
pops in, once it has been stored in the browser cache, the effect
works. Wondering if there is a way to preload the new image before I
fade the old one out and the new one it, here is my code so far:
$('.gholder img').click(function(){
imgname = $(this).attr("title");
caption = $(this).attr("alt");
if(imgname != imgname1)
{
imgname1 = imgname;
$('#imgholder').fadeOut(function() {
$('#imgholder').html('<img src="images/gallery/large/'+imgname
+'.jpg" />');
$('#caption').text(caption);
$('#imgholder').fadeIn();
});
}
});