How to ensure important images load first?

What is the best way (if any) to ensure the most important image on my site (top banner) loads first?

A browser loads elements in the sequence it comes across them.

If your site's banner seems to be taking its time loading, you should be looking at the size of the image and whether there would be some advantage in slicing into smaller images.

Geoff, I thought as much!
You're definitely right about the size of the file and I've thought about slicing it into three seperate images, but don't know how to reassemble in the web page.
Can you point me to any help with that?

thanks
Snappy

Load the three slices into the same div.

Float them all left with no padding or margin and they should butt up against each other.

You can use JavaScript to "preload" the important images. I'm not too sure how functional it would be, though.

I had three slices, two side by side and one along the bottom...
The ones side by side are fine but there is a gap between those and the one beneath.
The top two images are 159px high and the bottom one is 41px high.
Can you help?

Code: Select all

#header { width: 798px;  /* Always 2px less than #mainframe */ 
height: 200px; 
position: absolute;  /* DO NOT CHANGE */ 
margin-top: 25px;
top: 0; left: 0;
}

Code: Select all

<div id="header">
<img src="imagesOct/images/banner_Oct06_v2_01.jpg"/><img src="imagesOct/images/banner_Oct06_v2_02.gif"/><img src="imagesOct/images/banner_Oct06_v2_03.jpg"/>
</div>

Need to see the live page to see what you have done.

http://www.wildside-creative.co.uk/trust2a.html

It looks fine in IE (mac and PC). The problem only occurs in Firefox (mac and PC)(which makes a change I guess!).

Cheers
Snappy

Just been to your page which looks ok but the top image appears to be all one apart from the logo at the right.

That's right, its two side by side and one along the bottom.
Did you look in Firefox?(Its ok in IE) There shouldn't be a gap between the two top images and the one along the bottom.

Snappy

I would forget about IE 5 Mac. Oh yeah I so would. Save yourself the headache.

__________________

Problem is in Firefox on both Mac and PC. For once IE on my mac is playing ball!

IE 5 isn't really that bad to work with. Now 4 on the other hand, that's a regular barrel of good times.

Had another look.

Could not see any css code to tell the images in the header to float left so that they stack up alongside and underneath each other.

Some pointers:
You do not have a charset defined for your page.

Your img tags should end ' />' and not '/>'. Note the space before the forward slash. This is a requirement of xhtml strict.

Your page fails W3C validation on 12 counts.

Right...sorted!
I put the below in the main stylesheet and nothing in the "ieonly" stylesheet

Code: Select all

#header img{
float:left;}

Looks okay now in both Firefox (mac/PC) and IE (PC) and Safari (mac).
Completely wrong in IE on the mac, but I think I'm gonna have to live with that. Or am I? Can I do any more? I'm only flesh and blood afterall!!


Thanks for all of your help. Stay tuned for my next newbie dilemma...
Snappy

I really wouldn't beat yourself over the head regarding IE on the Mac. It's a dying breed. IE on the Mac that is.

IE on the Mac is long dead, even MS doesn't offer it for download any more and it no longer comes bundled with the OS.

__________________