在 IE6-8 中预加载图像错误

Question

有问题的页面：http://phwsinc.com/our-work/one-rincon-hill.asp

在 IE6-8 中，当您单击图库中最左侧的缩略图时，图像永远不会加载。如果您再次单击缩略图，它将加载。我正在使用 jQuery，这是为画廊提供动力的代码：

$(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;
    });
}
});

一位同事告诉我，他一直对 js Image() 对象有问题，并建议我在 div 集内附加一个 <img /> 元素，设置为 display:none;，但这对我来说有点乱 - -我喜欢使用 Image() 对象，它使事情变得干净整洁，没有添加不必要的 HTML 标记。

任何帮助将不胜感激。它仍然可以在没有图像预加载的情况下工作，所以如果所有其他方法都失败了，我只需将预加载包装在 if !($.browser.msie){ } 中并收工。

Answer 1

我看到你已经解决了这个问题，但我想看看我是否可以让预加载也能在 IE 中工作。

尝试改变这个

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

到这里

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'); 
    }); 
  }
});