预加载图片的Bug IE6-8

页的问题：http://phwsinc.com/our-work/one-rincon-hill.asp 预加载图片的Bug IE6-8

在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的图片（）对象的问题，并建议我只是追加内的<img />元素div设置为display:none;，但这对我的口味有点麻烦 - 我喜欢使用Image（）对象，它保持事物的美观和干净，没有不必要的添加HTML标记。

任何帮助，将不胜感激。它仍然可以在没有图像预加载的情况下工作，所以如果一切都失败了，我只需将预加载到if !($.browser.msie){ }中并称之为一天。

来源

2010-04-15 Kevin C.

如果我是你，我会单独设立了'＃photo'“负载”的处理程序，而不是做它的每次点击喜欢那。 – Pointy 2010-04-16 00:01:03

我不太明白 - 你能提供一个代码示例吗？每次单击缩略图（因此正在加载新图像）时，加载处理程序是否需要运行？否则它只会在$（document）.ready（）上运行1次。 – 2010-04-16 21:57:48

我看你已经解决了这个问题，但我想看看是否可以在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-16 02:56:52 Yisroel

对不起，我花了这么长时间才得到这个，很忙。您的方法奏效！大多数情况下......唯一的问题是，每过一段时间都会出现某种奇怪的闪烁......但我不能把它固定下来，这很难复制。噢，我现在正在使用你的新代码，谢谢！ – 2010-05-04 22:43:22

预加载图片的Bug IE6-8

回答

相关问题