Order of loading

[MrApples]

I have a header that is very demanding when it comes to file size, and since it is not vital to the rest of the page, I would like it to load last. How would I go about doing this?

[Analogpoint]

I think you'd better explain in a bit more detail exactly what you're trying to do.

[MrApples]

Because the header is high in size, it is holding up the rest of the page(only the headers from a quick glance) from loading on slow connections. Since the images of the header I am referring to is only extra, I would like it to load after the rest of the forum.

[Analogpoint]

You could do it with Javascript, but then it would break for non-js browsers. You could put it in the footer, and move it after page load (with Javascript), or you could not include it in the page, and load it after pageload with Javascript.

But before doing all that, I'd seriously try to bring the header image filesize down to a reasonable size first. How big is the file?

[Coders Shack]

place the header in the footer, then use CSS to move it to the top, and make an empty div with the height/width in the header where your "footer-header" will overlay.

[Princeton]

The header is the first thing a visitor sees .. this is the spot where your brand is visible to the world. Why would you want to make it the last thing to load?

I suggest rethinking your "header" options.

You will get more specific solutions if you post the URL?

[MrApples]

<a href="http://www.pollama2.pollama.com" target="_blank">http://www.pollama2.pollama.com</a>

I can't exactly tell for sure how bad it is as my internet is messed up.

I have plans to optimize it some though.

[Dilmah]

Try this:

http://www.cobydelaney.com/test/test.htm

Download the images from here.

I optimised them and combined them for you.

344Kb down to 39Kb.

[MrApples]

How did you do that?

[nexialys]

actually, the original images were not optimized for the web... that's the only problem you had...

[MrApples]

How are they optimized for the web?

[Lynne]

Photoshop allows you to save them optimized for the web. What application were you using to make and save your images?

[Wayne Luke]

Because the header is high in size, it is holding up the rest of the page(only the headers from a quick glance) from loading on slow connections. Since the images of the header I am referring to is only extra, I would like it to load after the rest of the forum.


Look at the Yahoo User Interface (YUI) library. They have an experimental ImageLoader that loads images after the page has been completed. You can find it here:
http://developer.yahoo.com/yui/imageloader/

Since YUI is slowly being integrated throughout vBulletin, this shouldn't add too much overhead.

[Dilmah]

Changed the optimisation settings using my graphics program.

You're welcome...

[MrApples]

Thank you dilmah, but I need to know how it's done. Optimizing 3 of em for me is great and all but it doesn't exactly help me as much as telling me would.

THank you all, I'll find something that can do that "Save for Web" thing.

[Dilmah]

I remember now why I don't bother posting in your threads...

[MrApples]

What is that supposed to mean?

[aceofspades]

If you own photoshop there is an option under File to save for web, instead of saving the normal way. I dont really know much about it, but it does seem to compress the file size down dramatically, probably by decreasing the detail slightly which may not be noticeable in a browser.

Play around with it, it should speed up the laoding of your site.

[Analogpoint]

Fireworks and Photoshop are good, but not free. The Gimp (http://www.gimp.org) is also good (and free). Install one of these programs, then look through the help files, where they explain how to "optimize" images. Optimization is simply making the filesize as small as possible while keeping visual quality the same or nearly the same.