Graphics causing jumpy page on loading

[affmark]

Hi, I'm not sure exactly where to post this so I hope it's in the right forum.

I am showing the images on a new site that I am creating by using a page that does the sizing, for example:

<img src = "page.php?src=image.jpg&width=10&height=10">

This works great but the alt tags show up before the actual graphic does and cause the page to jump around a lot before it is completely loaded in IE. Once the page is loaded, all is well, it's just a little annoying on page load.


Is there any way around this?


Thanks.

[Wacky]

The jumpiness is to do with browsers reflowing the page layout because they haven't been instructed to apportion space for the image. Try adding the width and height attributes to the img tag; browsers will then "reserve" that much space in advance, and they won't have to wait until the image has loaded/started loading to know what size it is.

Not sure about preventing the alt text from showing up, I'm afraid.

[affmark]

Thanks Wacky


Adding height and width attributes does indeed keep the page from being jumpy but since the images are coming from a variety of sources, they are unique in their proportions. They are sized according to a max width and max height of 125 some images are only, for example, 100px in height. They become stretched when I add the width and height attributes.


Is there some way to add these in respect to each image that isn't going to affect the page load speed?

Thanks.

[johnyboy]

> Not sure about preventing the alt text from showing up, I'm afraid.

you can use css to style alt text i just found recently (at least for firefox).

img { color:#666; font-style: italic; } for example, so i suppose you could colour it to the same colour as the background, or make it miniscule or something. but then if the images aren't loading for whatever reason visitors aren't going to be able to read the alt text so this is a very stupid course of action imo. browsers displaying alt text until the image loading is good imo. not sure why you'd want to stop that.

> They become stretched when I add the width and height attributes.

obviously you need to set the width and height according to what the width and height of the actual images are. in your example
<img src = "page.php?src=image.jpg&width=10&height=10">
you're using width and height values -- you have the info right there -- so just use those values to fill in the img tag's width and height attributes accordingly.

[cranial-bore]

As johnyboy says don't bother trying to hide the alt text. It's fine for the images to replace it as they load.

In order to avoid the jumping you'll need to use getimagesize to get the dimensions of each image to reserve the space. I assume you're getting images in some sort of a loop....probably from a database query.

Code will look something like this:

while(getting_each_image) {
 $path = 'path-to-image.jpg';
 $size = getimagesize($path);
echo "<img src='$path' alt='$alt' $size[3]>";
}