Preloading Image Bug in IE6-8

Question

Page in question: http://phwsinc.com/our-work/one-rincon-hill.asp

In IE6-8, when you click the left-most thumbnail in the gallery, the image never loads. If you click the thumbnail a second time, then it will load. I'm using jQuery, and here's my code that's powering the gallery:

$(document).ready(function() {
// PROJECT PHOTO GALLERY
var thumbs = $('.thumbs li a');
var photoWrapper = $('div.photoWrapper');

if (thumbs.length) {
    thumbs.click( function(){
        photoWrapper.addClass('loading');

        var img_src =   $(this).attr('href');

        // The two lines below are what cause the bug in IE. They make the gallery run much faster in other browsers, though.
        var new_img =   new Image();
        new_img.src =   img_src;

        var photo =     $('#photo');
        photo.fadeOut('slow', function() {
            photo.attr('src', img_src);
            photo.load(function() {
                photoWrapper.removeClass('loading');
                photo.fadeIn('slow');
            });
        });

        return false;
    });
}
});

A coworker told me that he's always had problems with the js Image() object, and advised me to just append an <img /> element inside of a div set to display:none;, but that's a little messy for my tastes--I liked using the Image() object, it kept things nice and clean, no unnecessary added HTML markup.

Any help would be appreciated. It still works without the image preloading, so if all else fails I'll just wrap the preloading in an if !($.browser.msie){ } and call it a day.

Answer 1

I see you've fixed this already, but I wanted to see if I could get the pre-loading to work in IE as well.

try changing this

photo.fadeOut('slow', function() { 
  photo.attr('src', img_src); 
  photo.load(function() { 
    photoWrapper.removeClass('loading'); 
    photo.fadeIn('slow'); 
  }); 
}); 

to this

photo.fadeOut('slow', function() { 
  photo.attr('src', img_src); 

  if (photo[0].complete){
    photoWrapper.removeClass('loading'); 
    photo.fadeIn('slow'); 
  } else {  
    photo.load(function() { 
      photoWrapper.removeClass('loading'); 
      photo.fadeIn('slow'); 
    }); 
  }
});