Roll Over Question

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
marty999
Beginner
Beginner
Posts: 1
Joined: Sun Nov 23, 2003 10:04 pm

Roll Over Question

Post by marty999 »

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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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: Select all

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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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