ansaurus

Question

Answer 1

A:

I'm not a rails programmer, but my understanding is that Rails uses Prototype by default. Assuming that, you could include this JavaScript:

Prototype.preloadImages = function(){
    for(var i=0, images=[]; src=arguments[i]; i++){
     images.push(new Image());
     images.last().src = src;
    }
};

Then add this code wherever your onload code runs. Maybe something like this:

Event.observe(window, 'load', function(){
    Prototype.preloadImages('header/home_over.gif','another/image/to/preload.gif');
});

You'll have to assure that whatever magic image_tag() does is done to the image paths to assure that the correct image is preloaded.

artlung 2009-11-10 22:06:04

Something to be aware of here is that Rails' `image_tag` helper by default will append timestamps to asset paths to allow for instant cache invalidation upon a file change. It's really hard to live without this once you are used to it, and I'd recommend avoiding hacking something new together for this. I suggest Andy Atkinson's answer for that reason.

Barry Hess 2009-11-11 03:59:44

Very interesting, though the implication is that Rails has a strong bias against mouseovers. Learn something new everyday. :-)

artlung 2009-11-11 07:51:27

Rails does the same timestamp appending to the mouseover images, I believe. The only negative here is that it hasn't abstracted preloading images, which I don't think can really be considered a "bias against mouseovers." Using the CSS Sprite technique should be equally achievable in Rails as in any web framework.

Barry Hess 2009-11-11 15:34:28

Thank you for letting me know about the timestamps Barry. As artlung said, lean something new every day.

Chris C 2009-11-13 05:39:47

Answer 2

+5 A:

Are you sure you don't want a CSS Sprite here? Basically you put your image states into one image (Photoshop), set the image as the background of an anchor element, then adjust the visible area with CSS for the background property and the :hover and :visited states. Only one image has to download this way.

Andy Atkinson 2009-11-11 03:22:07

I actually ended up removing the rollover buttons altogether and going with standard links with a single background_image of the div set. A CSS Sprite would have worked but deep down inside I really wanted to get rid of the images to reduce the loading time and make it easier to add more menu items in the future. Thank you for your answer and the link to CSS Sprites which will come in handy in the future.

Chris C 2009-11-13 05:48:57

ansaurus

tags:

views:

answers:

Preload Mouseover Images in Rails

related questions