JQuery Rollovers without preload

Question

$('.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 example) test.gif with the class 'ro' changes to test_o.gif when rollover, the problem is that the images are not in the cache, there is a rollover lag and rollloff.

Basically, if I clear my cache and visit the test page, every time I transfer and roll back the image, it uploads a file every time, so you can sit there for hours and still upload rollover images every time. However, when I refresh the page and the images are now in the cache, it works instantly, which is what I have to achieve.

I tried using this

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

to preload images using this

$.preload('.ro');

but he does not seem to have an effect.

Any ideas?

Answer 1

doc, .

$(function(){
   $('<img />').attr('src',url);
});

Answer 2

, jQuery, script, , - . ,

    //preload images
    $('.ro').each(function(){
        $('<img/>').appendTo('body')
            .css({ display: "none" })
            .attr('src',$(this).attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2"));
    });
    //hover them
    $('.ro').hover(
        function(){
            t = $(this);
            t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2"));
        },
        function(){ 
            t = $(this);
            t.attr('src',t.attr('src').replace('_on',''));
        }
     );

body IE, , DOM ( , ), , .

, , , .