6

I have a situation where I would like an HTML img which has not yet loaded to have a pre-set height. The reason is that this height will be used in a calculation that may fire before the image is fully loaded and needs to remain accurate. I tried the following:

<div>hello<img src='http://example.com/invalid.gif' class="testimage"> there</div>

and put in some css

.testimage {
    height: 200px;
    width: 200px;
}
​

and at least in Firefox 5, the extra space is not rendered (and oddly, the broken image doesn't show either, just a blank space). That is, until I add display: inline-block. In at least some other browsers the default display of inline produces the desired result. Is this expected? If so, why?

Here's a jsFiddle as well: http://jsfiddle.net/uYXD4/

Dan
  • 10,990
  • 7
  • 51
  • 80
  • Not really an answer but why not preload the image(s) on a diffrent page and then redirect it to main page, this way you will always be 100% sure that the image was loaded. – compcobalt Jun 25 '12 at 16:38
  • If you have images of different heights and you're relying at those heights to fire off some js, then you really need to wait until the image is loaded. – idrumgood Jun 25 '12 at 16:39
  • or use an empty or transparent image (.PNG) with a spec. height/weight already set and then just replace the img src when you want. (like a placeholder) – compcobalt Jun 25 '12 at 16:49
  • @idrumgood I may do that as a fallback, but it's a complex case and I'd prefer not to rely on that entirely. – Dan Jun 25 '12 at 16:49
  • @compcobalt that second idea might work. I'll try that. The first one I'd rather not because it'll be a better UE to show the rest of the content first and let the images load when they load. – Dan Jun 25 '12 at 16:51

3 Answers3

3

it says here that images are inline elements - http://htmlhelp.com/reference/html40/special/img.html

On the other hand take a look here - Is <img> element block level or inline level?

It looks like the <img> element is kind of both inline and block. No strict rules defining it, so probably the browser vendors make their own decisions about the defaults. So your best bet is to reset their assumptions to display: inline-block

Community
  • 1
  • 1
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
2

Images are replaced elements:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates.

For replaced elements, display: inline-block is supposed to have the same exact same efffect as display: inline, which is the default.

So this may be a possible explanation for that strange behaviour in some browsers*:

They treat only completely loaded images as replaced elements, and otherwise treat them as non-replaced elements. That makes sense after all, and the standard does not explicitly disallow that. As a consequence, there's 3 possible scenarios:

  1. replaced element, inline or inline-block doesn't matter, height property works
  2. inline non-replaced element, height attribute has no effect
  3. inline-block non-replaced element, height property works

Loaded images always qualify as 1., and broken/loading images may qualify as 1. or 2. (or 3. if you set display: inline-block explicitly)

*Not sure if that's how things actually work though.

user123444555621
  • 148,182
  • 27
  • 114
  • 126
0

Why not use something like

<img src="..." width=400 height=200>

I'm doing the exact same thing and it works quite well. Another option is...

$('.myimg').load( function() { /* ops */ } );

though I don't know if that waits to load the image in ALL browsers or not

tigertrussell
  • 521
  • 2
  • 13
  • @ZoltanToth it does, but if you give it an invalid IMG it gets rid of the image: http://jsfiddle.net/uYXD4/10/ – tigertrussell Jun 25 '12 at 20:57
  • Another example, loading it WITHOUT the src attribute, then populating the src from JS. Works on Firefox. http://jsfiddle.net/uYXD4/11/ – tigertrussell Jun 25 '12 at 20:59
  • that's exactly the case - what if the image server is busy and the image arrives with a significant delay (3 sec for example) - http://jsfiddle.net/uYXD4/12/ – Zoltan Toth Jun 25 '12 at 21:08
  • Firefox removes it for a 404, not just because it's "taking too long" – tigertrussell Jun 25 '12 at 21:12