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

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

Pixical для обеспечения соответствия стандартам совместимых браузеров и фильтров css для IE должен делать трюк. не нужно несколько изображений

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