Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Archived Topics for the old Version 3.0 JavaScript Menu
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:43
Preload graphic images for roll overs
Poster: paulvgibbs
Dated: Thursday September 12 2002 - 14:02:54 BST
Is it possible to preload the graphic images which are used as roll overs?
Poster: John
Dated: Thursday September 12 2002 - 15:24:33 BST
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.
Poster: kevin3442
Dated: Friday September 13 2002 - 6:47:54 BST
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
Poster: John
Dated: Saturday September 14 2002 - 19:27:05 BST
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.
Poster: kevin3442
Dated: Sunday September 15 2002 - 4:32:47 BST
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:
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];
}
}
{
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
Preloading doesn't work
Poster: dschneller
Dated: Wednesday October 23 2002 - 21:42:55 BST
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.
Poster: kevin3442
Dated: Wednesday October 23 2002 - 23:27:18 BST
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