How can I work around reloading these images?

Question

Hi,

I have a simple jQuery image changer, that when you hover over it will make swap all images with their grey version except the one you are on, that one will stay colour (They are all colour to begin with) and when you hover over another image, the last image gets changed to grey and the new one gets changed to colour.

However on IE, when you hover through the images, because it is changing the src IE will display the coloured version for a split second before doing what it is supposed to.

Here is the code:

$(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);
});

  });

});

Any help would be appreciated :)

Thanks.

Answer 1

You could display the color image as a regular <img> and then the gray version is the css background. On hover, fade it's siblings img's out.

Something like

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

Just make sure you either have content keeping that li from collapsing, or you manually set the dimensions.

Answer 2

Try using image sprites for this. This involves putting both grey and colour in the same image and then instead of changing the source you simply change which part of the image gets shown. The solves the problem of your browser having to load images on the fly as they will already be loaded.

Answer 3

Pixastic for catering to standards compliant browsers and css filters for IE should do the trick. dont need multiple images

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