How to force an <img> to take up width, even if the image is not loaded

Question

I'm loading a bunch of img's, and I'd like them to take up space on the document even if they are not loaded, or have not completed loading yet.

I tried specifying width and height (both as attributes themselves, and within a style attribute), and find it frustrating that the images will not take up space if they don't load.

Surely, there must be a way to force an img to specific dimensions, **even if that image fails to load.

Thanks

Answer 1

There certainly is:

<img src="path/to/image.png" height="50" width="20" />

Also, the reason specifying the width and height within the style="/* css */" attribute didn't work is because images are, by default, in-line elements. Had you specified display: block the image would've accepted the width and height values.

If you add, to the css/style:

display: inline-block;

It should work. I'm not sure why Firefox doesn't respect the width/height attributes, but still. Even IE, with a defined doctype should respect display: inline-block, since img elements are, by default, in-line anyway.

Answer 2

The simple answer: wrap the image in a <div> with a fixed width.

<div style="width: 400px;"><img src="404.png" /></div>

If you set padding, border etc to 0, you won't notice that the div is there.