I have a very graphic intensive page that I am working on and would like to change the load order.

Currently, when the page loads it goes through and loads them based on their placement in the code (top to bottom). This is fine except there are a lot of mouse over images that I would like to have load AFTER the page content loads.

That way clients will see the page quicker and the mouseovers can load as they see it.

Any help is greatly appreciated. thanks.

The short answer is no.

The long answer is that there are often good techniques that can reduce the size of your images dramatically while having no adverse effect on the visual presentation of your site. Often times, you can even reuse background images as rollovers with real text and dump your load size by up to 90%! I've pulled this off a few times for people before.

Can you post a test page somewhere? Maybe I (or someone else) could give you some pointers on using images efficiently.

Yes, I have down all the optimization. The problem is that I don't want to use real text one some images because it doesn't look as good as the text on my buttons.

Originally posted by boardr00
Yes, I have down all the optimization. The problem is that I don't want to use real text one some images because it doesn't look as good as the text on my buttons.

You may still be able to reduce your load time, again, not by further optimizing, but by using images more strategically.

For example, if you have a complex background image behind your button text, you can export it without text once and use it as a background behind text with a transparent background. Each text image would probably be very small (200-400 b. maybe?) and the background image would only have to load once, perhaps a second time for your rollover effect. This might save you 30-40 kb. right there!

Switching from JS to CSS rollovers will knock out a ton of unnecessary markup - there's a few kb. per page.

Finding repetition in images and repeat it on axes can strip a lot of load time out as well.

And again, the visual integrity of your presentation remains perfectly intact. Seriously, if you want to send me a link via PM (since the rules get a little funny about posting links on the board), I can look it over and point out specific areas where you can save space and methods to put it into action. I do a lot of this for friends and fellow developers all the time. You'll be surprised what can be done :)

Feel free!

Hmm....very interesting. Yes, i will create a link as soon as the page is up. I would really appreciate the help. Thanks.

Here's a JavaScript image preloader:

http://javascript.internet.com/miscellaneous/preload-images.html

I would assume it preloads in the exact order you list them.

But I agree with the_pm. CSS for image rollovers can be a great alternative.

Sorry if this is a basic question, but how do you use css for image rollovers? I use css for all my text but have never used it for images. Thanks.

Originally posted by boardr00
Sorry if this is a basic question, but how do you use css for image rollovers? I use css for all my text but have never used it for images. Thanks.

I found image rollovers very easy to locate on basic .CSS tutorial sites, for example just googling "css image rollover" will yield plenty. There are plenty of them out there -- the only issue is browser compatibility. If you find one, you'll want to test it out.

pm sent to the_pm

Can anyone take a look at my homepage and suggest ways to improve download speeds?

If so, please email me asap: boardr00@yahoo.com

Can anyone take a look at my homepage and suggest ways to improve download speeds?

If we had a link, then maybe we could.

I had asked people to email me because the site is not done yet. I will provide them with a link just for that page.