$('.ro').hover(
    function(){
        t = $(this);
        t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_o.$2"));
    },
    function(){ 
        t = $(this);
        t.attr('src',t.attr('src').replace('_o',''));
    }
 );

I use this code so that (for examle) test.gif with the class 'ro' would change to test_o.gif on rollover, the problem is when the images aren't in the cache there is lag on rollover and rolloff.

Basically if I clear my cache and visit the test page, everytime I rollover and rolloff the image it is loading the file each time, so you could sit there for hours and it would still be loading the rollover images each time. However, when I refresh the page and the images are now in the cache it works instantly, which is what I need to achieve.

I've tried using this

http://flesler.blogspot.com/2008/01/jquerypreload.html

plugin to preload the images with this

$.preload('.ro');

code, but it seems to have no effect.

Any ideas?