[jQuery] problem with preloading a full large image in IE6, IE7
Hello,
i have a problem with a photogallery i am working on. Basically it
work the way that you click on thumbnail and you get a large size
image. For displaying images i am using fadeIn and fadeOut effect from
Jquery library.
I decided to preload always the large image before i do the fading
because at the first requests on the server i could see the pictures
loading on the screen and the fading effect didn't look good then.
The shortened code for that is:
$("#image").fadeOut("slow", function() {
var loadedImage = $("<img />").attr({
src: image,
height: image.h,
width: image.w
});
$(loadedImage).load(function() {
alert('loaded');
$("#imageHolder").html('<div id="image"></div>');
$("#image").html($(this));
$("#image").fadeIn("slow");
});
});
Everything works fine in FF. But in IE6 and IE7 the pictures at second
requests are already loaded in the browser cached, so it basically
skips the whole part "$(loadedImage).load()" where i am puting the
image in DIV#image and the image doesn't show up at all.
Is there a way in jquery how I can force the loading of the image when
i need and right after it is all loaded to display it and continue
with my script? I need to wait until the picture is all loaded. I
don't know how to handle this in IE.
Thank you very much for any help.
Lenka