Roll Over Question

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:55

Roll Over Question

Poster: marty999
Dated: Sunday November 23 2003 - 21:10:34 GMT

Hi

I am using the roll over images menu. Is there any way to force load the second roll over image into the user's cache?

I notice that that roll over effect does not actually load until you roll over it. This is not the case in some roll over effects I have seen where the image is already loaded when the script is loaded.

I try to keep my gif images small but even then it takes a few seconds for the image to load (if using a modem, can take longer).

For first impressions of a new visitor , this is not so good.

Any ideas for code improvement?

Regards

<artin

Poster: kevin3442
Dated: Monday November 24 2003 - 19:22:22 GMT

Hi Marty,

It used to be that the menu code itself would cache all of the images used in the menu at load time. This was great for implementations that used only a few images, but caused a big slow down for menus with lots of items and lots of images. So, in a recent RC (can't recall which one), the caching was apparently removed in favor of loading the image when it was needed for display, at run time.

No biggie though... you could include your own image caching function. There are lots of ways to cache images... here's a function that I have used in the past:

Code:

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

// Add image names to the following list.
  var imgNames = new Array(
    "/imagepath/imagefile01.gif",
    "/imagepath/imagefile02.gif",
    "/imagepath/imagefile03.gif",  // etc...
  );

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

All you have to do is add the image path/names to the imgNames array. Where to add the function code? You could add it to the top of your menu_data.js file, or put it in a separate .js file that you source into your html pages. You could call the function anywhere you want, depending on when in the page loading process you want to cache the images. If you called it in menu_data.js, before drawMenus(), then the image caching would start before the menus appear. Or, call it from the body's onload event handler, to start caching images after the main menu and your other page content has alread appeared.

Hope that helps,

Kevin

Poster: John
Dated: Monday November 24 2003 - 20:09:52 GMT

The main menu is still built at load time, but the subs are not until actually called.

Industrial Strength JavaScript and DHTML Menus

Roll Over Question