1

有问题的页面: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 标记。

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

4

1 回答 1

2

我看到你已经解决了这个问题,但我想看看我是否可以让预加载也能在 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'); 
    }); 
  }
});
于 2010-04-16T02:56:52.670 回答