[jQuery] Problem with .load on dynamic images in IE...
I'm having a problem with the .load function of jQuery. For some
reason it will not work correctly for IE on a dynamically generated
image (one not in the cache). Below is my code. The "thumbs" will be
cached, but the large images are loaded dynamically after a thumb is
clicked. I also tried to .bind("load", function.... This also didn't
work.
Everything works great in FireFox, but everything in the .load
function will not run in IE. Any suggestions?
<script type="text/javascript">
$(function(){
$(".thumbnail").click(function()
{
var imageSource = $(this).attr("src");
$("#loader img").fadeOut("slow").remove();
imageSource = imageSource.replace("_thumb", "");
showImage(imageSource);
});
});
function showImage(src) {
var largeImage = new Image();
largeImage.src = src;
//$(largeImage).attr("src", src).load(function(){
$(largeImage).hide();
$("#loader").append(largeImage);
$(largeImage).fadeIn("slow");
//});
//loaded = $(largeImage)[0].complete;
//$("#loader").append(largeImage);
//$(largeImage).fadeIn("slow");
/*
$("#loader img").fadeOut("slow")
.remove();
var largeImage = new Image();
$(largeImage).attr("src", src)
.load(function()
{
$(largeImage).hide();
$("#loader").removeClass("loading")
.append(largeImage);
$(largeImage).fadeIn("slow");
});
*/
}
</script>
<h1>Gallery</h1>
<div id="gallerythumbs">
<img src="../img/photogalleries/wedding1/CRW_7934_thumb.jpg"
class="thumbnail" />
<img src="../img/photogalleries/wedding1/CRW_7954_thumb.jpg"
class="thumbnail" />
</div>
<div id="gallerylarge">
<a href="" class="navbutton" id="prevbutton"
onClick="NextPrevButton('prev'); return false;">« Prev</a>
<a href="" class="navbutton" id="nextbutton"
onClick="NextPrevButton('next');return false;">Next »</a>
<div id="loader" style="min-width: 350px; min-height: 350px; border:
solid 1px red; background: url('../img/loader.gif') no-repeat
center;">
<img id="LargeImage" src="../img/photogalleries/wedding1/
CRW_7934.jpg" />
</div>
</div>