Slow "overbgimage" On MouseOver

dcarriger · Post by **dcarriger** » Sun Jan 14, 2007 9:36 pm

On browsing for a potential new menu system for my client - one that would allow us to more quickly manipulate/add/delete new menu items, as opposed to the existing Fireworks system I have in place - I was impressed to see the functionality, varieties and ease-of-set-up afforded by Milonic's DHTML menus systems.

I seem to have one issue, though. I have implemented a temporary navigation in order to sell my client on this new system...it can be viewed at:

http://www.quikstage.com/new_menu/index.html

On placing this online for his visual approval before purchasing a site license (he hasn't seen it yet...I don't want to lose him by his seeing the existing issue), I have ascertained that any semi-quick hover or panning over the menu items fails to quickly access the "overbgimage", such that there appears to be white-spaced background showing while each item waits for the background-image to load FOR each nav item.

Has anyone else experienced this phenomenom...and is there a way to correct this? Perhaps an excellent preload <script> which works well with this menu system?

Note: it isn't my inet speed connection...I am on high-speed cable and preloadmenuimages.js (as suggested in a posting from http://milonic.com/mfa/2005-April/m ... blems.html) doesn't solve the issue either.

Screenshot:

Thanks....David

Post by **Andy** » Sun Jan 14, 2007 11:04 pm

Hi,

This is very odd, looks like the browser is loading the image but not until all the others have been loaded.

I see that you have tried using preloadmenuimage.js however, can't actually find this file on your system.

The system is looking in http://www.quikstage.com/new_menu/preloadmenuimages.js but as you can see it's giving us a 404 error.

First thing: get the preloadmenuimages.js file loaded properly and we'll take another look if it still doesn't work.

Cheers,
Andy

dcarriger · Post by **dcarriger** » Sun Jan 14, 2007 11:15 pm

Thank you for your quick response. Doh!...yeh, you're right. Placed it the main directory. Okay, an instance of the preloader script has been placed in the correct directory. Have cleared my cache completely and Refreshed. Still the same effect.

Let me know if you come up with anything. I'm tapped on troubleshooting.

Thanks for any assistance you can offer.

Drsandman2 · Post by **Drsandman2** » Thu Mar 01, 2007 7:30 pm

I am having the same problem, but notice you were able to correct it. Please let me know how you did so.

You can see my attempt here: http://www.atecdiversified.com/livetest

Not only are my background images slow loading, my little checkmarks are not swapping correctly either.

Thanks.

Post by **Ruth** » Thu Mar 01, 2007 7:39 pm

Hi,

We need a page to see what's going on.

They used the preloadimages.js module on the page. However, if you put the menu in a table, even though the images are preloaded there seems to be a problem sometimes and I think that's because of the tables, which the browsers want to load completely before anything functions.

Ruth

Drsandman2 · Post by **Drsandman2** » Thu Mar 01, 2007 7:40 pm

http://www.atecdiversified.com/livetest

I was editing the previous post when you posted.... thanks for looking into this for me.

I used the same preload script...

Ok, relogged into FTP and uploaded the preload script and new index.

Note that the problem isnt just on the first mouseover, it is every mouseover.

I just noticed that it says it is downloading the picture on the bottom of the browser everytime I mousover. It is as if everytime I mouseover, it redownloads the image and that is what is creating the problem. I just can't figure out why it would do that.

Actually, I think I figured it out. I need to create a style=background2. You see that my submenus act very different from the main, so if I define the image properties in a new background style I wont have to insert them in every aI() instance. I will let you know how it works, but right now I have to do some "real" work.

Drsandman2 · Post by **Drsandman2** » Thu Mar 01, 2007 8:15 pm

Well, I did clean the code up quite a bit but I'm getting the same problem... HUMMMMMMMMMMMMMMMMMMMMMMM

Drsandman2 · Post by **Drsandman2** » Thu Mar 01, 2007 10:10 pm

I can't seem to find a fix. I notice that this problem has been addressed before here on the forums, but never resolved. If the imageswap properties of Milonic work only on the local machine, then it is useless for my purposes. If I need to move on and start over, please let me know so I don't waste more time fiddling with these scripts.

Thanks

Post by **Ruth** » Fri Mar 02, 2007 12:17 am

Hi,

I'm working on it. I'm trying to figure out why different things are happening, for example in the original code you have a subimage which is a red arrow, but that subimage is not showing up on the main menu items, and I cannot figure out why, and I think that is causing some of the problem.

No, the overimage and such do not only work on local machines. Take a look at the samples

http://milonic.com/menusample18.php

http://milonic.com/menusample17.php

Ruth

Drsandman2 · Post by **Drsandman2** » Fri Mar 02, 2007 12:22 am

What I meant by working on the local machine is that my menu works fine until I FTP it, then it lags out when swaping images.

You might be looking at an old menudata file. I have updated it such that there are two menu styles - I don't want the subimage on the main menu. You will also see I added a fade and shadow effect to the menu.

http://www.atecdiversified.com/livetest/menu_data.js

You can see that the swap in this example is working fine... and I am using the exact same js files. http://milonic.com/menusample17.php

Here is another example - this is actually where I started. In these two examples, you can see the image and background swaps working just fine. http://milonic.com/menusample89.php

It seems the problem is that when you mouseover, the script is forcing to download the image all over again... you can see it happening in the status bar at the bottom of the browser. I think when mine is lagging is because my image files are larger than those used in the example... but still only 1-2kb !!!!!!!!!!!!!!

I am stopping here for the day, I really appreciate your help.

Post by **Ruth** » Fri Mar 02, 2007 12:27 am

Hi,

I need some information. You have your style set with bgimage=uline.jpg; then in the menu items in the main menu you have bgimage= and overbgimage= and whatever the bgimage is for each item. You also have image=transparent in the style. What exactly are you trying to do? Do you want those as bgimages or as images? They are not really bgimages, you don't want them to repeat do you?

If you could tell me what the rational is for setting it like that I might be able to figure something out.

by the way, that's a neat looking menu

Ruth

Post by **Ruth** » Fri Mar 02, 2007 1:12 am

Hi,

Try this page and see if you still have the problem. If you don't have the problem here I'll put up a zip file with what I did.

LINK REMOVED

Ruth

Drsandman2 · Post by **Drsandman2** » Fri Mar 02, 2007 1:28 am

Sweet! Can you post that zip?

I started to answer your questions but the more I looked at it the more I am figuring it out. Explain what I was doing will be a waste of time, but I will get on here tomorrow and point out what I did wrong so people dont have the same problem.

Thanks again!!

Post by **Ruth** » Fri Mar 02, 2007 1:42 am

Hi,

OK, the zip is up. LINK REMOVED

Things you need to know.

1. you now have two files, 1 is the menu data and does NOT contain the main menu.

2. the main menu is now in its own file and in the table cell. This means it will always be where you now have it no matter the resolution of the browser

You don't have to have it like that. If you want to change it back, just put the main menu back in the data file, but don't put the extra drawMenus with it

Finally, I noticed one thing when I was trying to get the images from your site, and I'm wondering if whatever is happening is the cause of your problem.

When I try to download the images, that is I put in the path to them, the image name changes to a capital letter and it will only let me download it as bmp, not the original jpg file. That almost seems like something is wrong with the images, they are corrupted or something, I don't know, but I thought I should let you know about that problem.

Ruth