images load before content?

I have a website where when a user does a query, he is taken to a results page with 25 200x150px image links. My problem is that (at least on my computer) the content seems to not load before the images!

I have content before and after the image part (something like header and footer, and the images are the content in-between) but I can't see the footer until after all the images have been transferred, which is a lot, around 500ms each and nothing appears before the previous image has loaded!

I tried to access my website from a proxy, but the results differed: The image slots were loaded, so was the header and footer, and the images loaded one by one, but without keeping any other content from being loaded!

Even so, they were loaded slowly... :(

This issue appears on Mozilla Firefox and on Internet Explorer,but not on Chrome or Opera.

Any ideas wh开发者_高级运维at could be causing this?

And more, any ideas of ideal optimization to my specific situation?? Thanks in advance!

Cheers!

Any ideas what could be causing this?

I think we would appreciate some code, firebug information, google page speed, etc.

Any ideas what could be causing this?

This is a guess, but maybe flushing the buffer early might help

And more, any ideas of ideal optimization to my specific situation??

Post-load your images(other assets too) using YUI image loader.

You can take a closer look at your page and ask yourself: "What's absolutely required in order to render the page initially?". The rest of the content and components can wait.

When loading javascript you should be using non-blocking javascript using headjs for example Or just put your javascript at the bottom.

I would advice you to have a look at Yahoo!'s best practices and Google Page speed page as well

This may not be related as Chrome and Opera are working faster, but what may be happening is your Server is still trying to get the content and is not done processing the HTML, this is what a video application I wrote in PHP did before I fixed it. Though, I am not sure, I think Chrome may make multiple-requests to the server and thus pulls down the images while waiting while IE and FF will do one task at a time. This is just my best guess.

If you are really worried about it you could do a JavaScript splash screen that would say something like "please wait content loading" and then remove once the page has loaded.

See http://rainbow.arch.scriptmania.com/scripts/preload_wait.html if that is what you want to do.