Как я могу обойти перезагрузку этих изображений?

Question

У меня есть простой jQuery-чейнджер изображений, который при наведении на него заставит поменять местами все изображения с их серой версией, за исключением той, на которой вы находитесь, что одно останется цветным (они все цветные с самого начала), и когда вынаведите курсор мыши на другое изображение, последнее изображение будет изменено на серый, а новое изображение будет изменено на цветное.

Однако в IE при наведении курсора на изображения из-за его изменения src IE отобразит цветную версиюна долю секунды, прежде чем делать то, что он должен.

Вот код:

$(window).load(function() {

//when mouse over the list item...
$('#portfolio ul li').hover(function(){

  $(this).find('img').addClass('active');
$(this).siblings().each(function(Idx){
    var imgSrc = ""+$(this).find('img').attr('src');
    var imgGS = ""+$(this).find('a').attr('rel');

    $(this).find('img').attr('src', imgGS);
    $(this).find('a').attr('rel', imgSrc);


    //alert (imgSrc + " " + imgGS);
});
  //when mouse leave...
}, function(){

 $(this).find('img').removeClass('active');
$(this).siblings().each(function(Idx){
    var imgGS = $(this).find('img').attr('src');
    var imgSrc = $(this).find('a').attr('rel');

    $(this).find('a').attr('rel',imgGS);
    $(this).find('img').attr('src', imgSrc);

    //alert (imgSrc + " " + imgGS);
});
});

//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){

$(this).siblings().each(function(Idx){
    var imgSrc = $(this).find('img').attr('src');
    var imgGS = $(this).find('a').attr('rel');

    $(this).find('img').attr('src', imgSrc);
    $(this).find('a').attr('rel',imgGS);

    // alert (imgSrc + " " + imgGS);
});

  });

});

Любая помощь будет оценена:)

Спасибо.

Answer 1

Попробуйте использовать для этого спрайты изображений. Это включает в себя размещение серого и цветного изображения в одном изображении, а затем вместо смены источника вы просто изменяете, какая часть изображения отображается. Решает проблему того, что ваш браузер должен загружать изображения на лету, так как они уже будут загружены.

Answer 2

Вы можете отобразить цветное изображение как обычный <img>, а затем серая версия - css background.При наведении указателя мыши исчезают.

Что-то вроде

​$('.yourList li').hover(function() {
    $(this).siblings().find('img').hide();
},function() {
    $(this).siblings().find('img').show();
});​​​​​​​​​​​​​​​

Просто убедитесь, что у вас есть контент, удерживающий этот li от свертывания, или вы вручную задаете размеры.

Answer 3

Pixastic для удовлетворения стандартов совместимых браузеров и фильтров CSS для IE должен сделать свое дело.не нужно несколько изображений

http://www.pixastic.com/lib/download/