Preloaded images not loading fast enough

How to ensure images are prloaded

[wedesign]

I just made a sample page for a friend and it uses a few rollover images. They work fine when i preview my work locally in IE, but once I uploaded it and viewed it live on the web the rollovers take 3-5 seconds to swap out. What am I doing wrong? As far as I can tell I have the "preload images" selected, so I thought this would ensure that images are loaded in the person's browser upon loading the page. Any suggestion?
I have a non-linked, non-live, simple home page example at www.abc.winningedgedesign.com. I use Dreamweaver and Fireworks, if that offers any clues.
Thanks!

[bobjunga]

If the preload was not working, it would only be slow the first time you roll over, but on your page they are just as slow on subsequent rollovers.

When I right clicked and downlaoded one of your images ie saved it as a 14k .bmp. Are your images .bmp? If you convert them to .jpg (file¦save as -> select jpg in "file type" drop down) they will be much smaller. You can further optimize the size in fireworks by choosing the "optimized" setting that has the lowest quality that is acceptable.

If your images really are bmps, I would start by converting one set (both the default img and the roll over img) and see how it works.

Also, if you use the ie alpha filter (partial tranparecy), even if the opacity is 100, it will slow down rollovers.

--BobG

[pixelkat]

onLoad="MM_preloadImages('/images/speaker_on.gif','/images/security_on.gif','/images/video1_on.gif','/images/cellula_on.gif','/images/logo_years.gif','/images/abcvan_on.jpg','/images/locations.gif','/images/contact.gif')"

the images you want to preload are the "off" state images because those appear first. you have preloaded some of the "on" states, but not all of them.

I am curious as to why you did 2 separate sets of images for your rollovers. it would have been more efficient to make a single image of the text and the icon as one image state. if the user rolls over the icon only, the text doesn't change with the icon.

and from what I could see in your code, none of your text image rollovers are preloaded. that would also be causing the delay.

since all your table cells containing content are defined in width, add up the total width of your table cells and replace table=100% with the total width. your tables will load faster that way.

I'm also trying to imagine what all those 120x1 single pixel table cells are doing. your tables would also load faster if you turned those cells into one and used the colspan="" attribute instead. that would also save you some download time. I saw those in at least 2 locations. Instead of:
<tr>
<td height="1"><img src="/spacer.gif" alt="" width="28" height="1"></td>
<td><img src="/spacer.gif" alt="" width="120" height="1"></td>
<td><img src="/spacer.gif" alt="" width="120" height="1"></td>
<td><img src="/spacer.gif" alt="" width="120" height="1"></td>
<td><img src="/spacer.gif" alt="" width="120" height="1"></td>
<td><img src="/spacer.gif" alt="" width="120" height="1"></td>
<td><img src="/spacer.gif" alt="" width="120" height="1"></td>
<td></td>
</tr>

do this:
<tr>
<td width="748" colspan="8"><img src="/spacer.gif" alt="" width="748" height="1"></td></tr>

that way, the browser won't have to work so hard and your tables will load faster!

another tiny speed tip is to shorten your image folder name to img/spacer.gif instead of images/spacer.gif. I also call my spacer.gif "dot.gif" in addition, instead of calling your mouseovers whatever_off.gif, whatever_on.gif, I call mine whatever_i.gif (i for inactive or off) and whatever_a.gif (for active or on). all this seems like it's hardly worth the effort, but wait until you have 100+ page site. every character counts toward the speed of download!

and if you ever get to hand-coding as I do, any opportunity to type fewer characters saves production time as well!

hope this helps.
kat

kat