Preload graphic images for roll overs

paulvgibbs · Post by **paulvgibbs** » Thu Sep 12, 2002 2:02 pm

Is it possible to preload the graphic images which are used as roll overs?

Post by **John** » Thu Sep 12, 2002 3:24 pm

I don't think you can do that from the menu (yet - who knows what Andy has planned for 4.0

), but if you happen to use Dreamweaver they have a preload script you could use.

kevin3442 · Post by **kevin3442** » Fri Sep 13, 2002 6:47 am

Hello,

I recall reading in another post recently that the latest version does preload images (or was it that an upcoming version will preload images?), but the post was not very detailed. Having started with an earlier version, I wrote a javascript to preload the images; much as you would when scripting graphical mouseover effects. This approach works well.

--Kevin

Post by **John** » Sat Sep 14, 2002 7:27 pm

kevin3442 wrote:...I wrote a javascript to preload the images; much as you would when scripting graphical mouseover effects.

That's exactly what the Dreamweaver script does. I'm not using images in my menus at this time, but it seemed it might work.

kevin3442 · Post by **kevin3442** » Sun Sep 15, 2002 4:32 am

I don't use Dreamweaver, so I'm not familiar with it. I do know that some development tools generate scripts for you for image rollover effects, including caching the mouseover images. However, I usually find it more efficient to write the scripts myself (maybe I'm just a control freak!). For what it's worth, here's a generalization of the javascript function I wrote to cache my mouseover menu images, as well as any other images I might want to cache for speedy retrieval on any other page. This function is general enough to apply easily in any page, so anyone reading this post may feel free to copy this function and try it.

Code: Select all

function CacheImages()
{
  if (!document.images) return;

// Substitute your own image names and paths in the img_names
// array below.  NO COMMA after the last name!

  var img_names = new Array(
    "/images/menus/image01.gif",
    "/images/menus/image02.gif",
    "/images/menus/image03.gif",
    "/images/other/other_image01.gif"
  );

  var imgs = new Array();

  for (var i = 0; i < img_names.length; i++)
  {
    imgs[i] = new Image();
    imgs[i].src = img_names[i];
  }
}

Substitute your own image names and paths in the img_names array. Note that there should be no comma after the last image name in the array. I call this function from the onLoad event in the <body> tag of my starting page. If your images are fairly small (as most probably are for use in the menus), they should load quickly, while the site visitor is taking in the content on your start page. The visitor probably won't even notice that the images are being loaded, although the file names will appear in the status bar as they are cached, unless you take over the status bar as well! One last note: If you want to cache images for use somewhere other than the menu, just add them to the img_names array. But since the menu is likely to be one of the first things a visitor interacts with, I would recommend prioritizing the menu images by putting them at the beginning of the array -- main menu mouseover images first -- so that they are cached first.

Regards,

Kevin

dschneller · Post by **dschneller** » Wed Oct 23, 2002 9:42 pm

Hi,
your code or the Preload Function generated by Dreamweaver does not work on my menu. I must first rollover with the mouse.
Do you have any idea?
Thanks for help.

kevin3442 · Post by **kevin3442** » Wed Oct 23, 2002 11:27 pm

Hi,

It sounds like the images are not being cached before you use the menu. So, the first thing I would suggest is that you verify that the images to be cached (preloaded) are actually being cached -- or not -- when the page loads. You could watch the Status Bar as the page loads; if the images are cached, you should see the image names appear as they are being loaded. A better way would be to (1) clear your cache directory, (2) reload the page that calls the caching function, then (3 - without opening any menus) view the contents of the cache directory to see if the images that were supposed to be cached are actually in the cache. If they aren't, then the caching function is definitely not working properly. That would lead us to try to figure out why. If you have a site up where it can be reached by others, it would help a lot if you could post a URL, so that I and others might be able to examine your code.

Kevin

dschneller · Post by **dschneller** » Thu Oct 24, 2002 12:22 pm

Hi,
it work now. I found an error in my JS.
Thanks again.

Milonic JavaScript Menu

Preload graphic images for roll overs

Preload graphic images for roll overs

Preloading doesn't work