Image preloading

Hi, I am still very new to Ruby on Rails, but I'm busy with my first
RoR website, everything went well, until I realized that my images
didn't preload... On previous websites I used a simple JavaScript
preloader that seemed to work very well:

    function preloadImages() {
      if (document.images) {
        var imgFiles = preloadImages.arguments;
        var preloadArray = new Array();
        for (var i=0; i < imgFiles.length; i++) {
          preloadArray[i] = new Image;
          preloadArray[i].src = imgFiles[i];
       }
     }
   }

And I called it from within the HTML:

    <body onload="preloadImages('/images/home.png',....etc....)

This is how I called the image rollover in the Rails code:
    <%= link_to(image_tag('home.png', :mouseover=>"home_ro.png"), '/',
{:controller=>'home', :action=>'index'}) %>

Can anyone please tell me why this didn't work? I also heard that
Prototype has it's own built-in image preloader, is this true?

Thanks I really appreciate your help!

You'll want to take the onload out of the body tag and do something like this in your application.js file:

document.observe("dom:loaded", function()
{
  preloadImages('/images/home.png',....etc....);
}
);

That still doesn't work in Firefox... What about caching? Won't that
help?
Or perhaps and alternative solution that works better?

You haven't really said what "doesn't work" means. What have you done to determine that there is a problem?

I’m just a rails amateur, but I’ve been dealing with Prototype stuff a bit longer and I bumped into this image preloading stuff already.

I don’t clearing understand what you want to do while your images are preloading and also what you want to do once they are preloaded and this is pretty crucial as this may last some time. You’ll never know.

And in addition your code is too simplistic.

So take a look at this that I posted to the ProtoScripty group a while ago:

It all depends, as you say, on why you’re preloading the images. Most of the image preloading code looks exactly like the OP’s and works fine if your UI relies on just having the images cached by the browser so they can work in smooth rollovers or other page effects that rely on image swapping. Your code is more capable, but possibly overkill if all that’s being handled is making sure mouseovers look good.

Note also that the preloading code has been blindly included in Web pages for years, even as bandwidth has increased to render the benefits insignificant.

Just my $.02