javascript - 在 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() 对象有疑问，并建议我只附加一个 <img />。 div 内的元素设置为 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'); 
    }); 
  }
});