Question

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

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.