Images shifting on page load (?)

[hchambers]

Disclosure.....I'm new here so hopefully this is in the right forum, this is my first real post, and the first website I'm creating. So please be patient with me...thanks!
Okay..on this site that I'm working on, I'm using CSS and html. I've created a div container in the main content area that is positioned absolute and then the 6 pictures within it are positioned relatively. The background of the div is the diamond design with the white frames for the pictures. I've noticed that when the page initially loads (in all browsers I've tested...IE7, Firefox, Netscape, Opera and Safari) the 6 images load slightly higher than they are supposed to be placed, and then they drop down to their correct positions at the end of loading. Is there a name for this? Is there any way to fix it? I would really appreciate ANY direction at this point..I'm totally pulling out my hair. The home page is not up yet, but here is a link to one of the pages and then you can just navigate via the menu. Thanks! ~Heather

[Dan Schulz]

Hi Heather,

I really can't see any shifting of the images like you're describing, but if you give the images a height and width in the IMG element via the height and width attributes that should take care of it.

[Stomme poes]

I see it. They load damn slow, too-- for me (broadband). The last time I saw this, it was my colleague's site where he has images sent by customers, which are simply stuck in boxes of a predetermined size... in other words, I've seen this same slow loading and shifting when a large image is "shrunk" by the browser. Properties tells me that they are indeed the smaller sizes, but then it also says "lightbox".

Those images should be popping up as fast as the words GOOGLE do on my screen with my connection... not slowly filling from top to bottom as if I were on dial-up (maybe why Dan doesn't see the shifting?)

[hchambers]

Hmmm.. it's interesting (and not good) that they're taking that long to load for you Stomme poes. Do you have a suggestion for how I can fix that? The images say "lightbox" because if you click on each picture it will bring up a larger picture via lightbox. That shouldn't affect the intial load time though. Any other suggestions?

[hchambers]

BTW, I see you've moved my post to a more appropriate thread. Thanks!

[hchambers]

Dan you are my hero. I hadn't even thought about specifying the height and width of each picture, but you're suggestion seemed to have worked. Now I just need to figure out how to make it load quicker...

[Dan Schulz]

Image optimization might help there, though I'm not sure how you'd go about it in your particular case.

[Stomme poes]

Well what I thought was that the images were actually LARGER in real life than when the smaller versions were loading. That is

an image of 300px by 500px in actual size
being set in a page where the HTML defines them as 100px by 250px or whatever
meaning that the browser is still loading the 300 x 500 image, which loads slower than if there was a real 100 x 250 version.

On my colleague's page, real estate agents are sending large (sometimes very large) photos of their homes, while the first page to display them has something like a thumbnail... but it's not another version of the image... it's the same large full-page image squished into a little box by the HTML... so, I see the images loading s l o w l y... from top to bottom, just like the real (large) one does.

Possibly you want to use a javascript or something... "image magick" comes to mind. Or, you only have a few images, so you could get away with 2 versions of them on the site.