View Full Version : Drop down menu Bug

Jan 17th, 2007, 12:43 PM
I have a drop down menu on my site, and when you roll over the buttons it takes a slight bit to load the buttons, so it look horrible. I made sure they are very low in file size, but it still isnt fluid. I'm not sure if it's a bug in the code, like a mistake I made somewhere, or whether it is just taking a second to load the graphic. If so, then how am I to get a good loading drop down menu?

When I view this menu on my local server on my computer it works fine. But then gets glitchy when I view it on my webserver online.

Here's the link:

Please tell me how I can make it run smoothly!

Jan 17th, 2007, 01:04 PM
I had a look at your site and didnt notice the menu image loading times.

Nonetheless, you need to preload your images using javascript. see here (http://www.pageresource.com/jscript/jpreload.htm).


Jan 17th, 2007, 01:24 PM
Awesome! Thanks man.
Didn't even know you could pre-load your images. That's crazy.
I'll be doing that from now on. :thumbsup: Thanks alot.

Jan 17th, 2007, 01:43 PM
One way of preventing download lag is to use single image rollovers as described in the ALA article "Sliding Doors of CSS, Part II (http://www.alistapart.com/articles/slidingdoors2/)"; the basic thought is to combine both states in one image (which will be loaded from the start in its entirety) and show each state by shifting its position rather then swapping out entire images.

Jan 18th, 2007, 01:09 PM
Cheers for the article :thumbsup:

Jan 26th, 2007, 12:38 AM
I am using the preload buttons, but for some reason in IE 6 or below, it's not properly preloading them. It works fine in versions above that though.

Any idea how to fix that?

May 18th, 2007, 02:07 AM
Don't use javascript to preload images, use CSS, like this (anywhere on your page):

<div style="display: none;">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
etc etc

May 18th, 2007, 02:15 AM
I'll try that out. Thanks.