jQuery Rollovers Not Preloading

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 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?

none of these options help, still when I enter the page with no cache it trys to load the image as if it was a new image everytime I rollon and rolloff — zuk1, Jul 09 '09 at 12:12
can you show us how exactly you are trying what we said? Also did you check firebug/fiddler to see if the image gets requested for a second time if you preload them. If the url is the same it should not be. Have you got a demo url? — redsquare, Jul 09 '09 at 19:09
See this: http://stackoverflow.com/questions/476679/preloading-images-with-jquery — karim79, Jul 09 '09 at 11:42

score 4 · Answer 1 · answered Jul 09 '09 at 11:41

4

Just create a dummy image(s) on doc ready, no need for a plugin.

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

answered Jul 09 '09 at 11:41

redsquare

78,161
20
151
159

score 0 · Answer 2 · edited May 23 '17 at 11:48

Combine yours with the one on Preloading images with jQuery and you get a short script that will preload the images then hover them for anything with the nominated selector. eg

    //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',''));
        }
     );

This approach is appending them to the body tag to deal with the issue of IE discarding images that aren't added to the DOM (as mentioned in the other post relating to this) but you could stick them anywhere that makes sense for you.

I like the approach in this post as you don't have to declare an array of images ahead of time, simply adopt a naming convention for rollovers and a class name and you're sorted.

jQuery Rollovers Not Preloading

2 Answers2