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

在IE6-8中预加载Image Bug

1 个答案: