0

I know I can attach an event listener to a loading image so that it'll trigger when the image finishes loading like this:

<img id="mine" src="image.jpg" />

<script>
$('#mine').load(function() {
  console.log($(this).height()); //The image's height
  console.log($(this).width()); //The image's width
})
</script>

But my browser knows how big the image is going to be as soon as the header is loaded - can I tap into that event, so that as soon as the browser knows the image's size I can resize elements on my page?

Thanks!

JP.
  • 5,507
  • 15
  • 59
  • 100

1 Answers1

2

No, you can't. But, you should pass the image's dimensions along with the tag.

<img id="mine" src="image.jpg" width="100" height="100">

For example, in PHP you can use the getimagesize() function.

It's even a recommended practice to improve browser rendering.

Alexander
  • 23,432
  • 11
  • 63
  • 73
  • Shouldn't the `width` and `height` be in a `style` attribute? – Shrey Gupta Jan 06 '13 at 21:21
  • 1
    The `height` and `width` attributes may "seem" deprecated, but they are more than acceptable. See also [Image width/height as an attribute or in CSS?](http://stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css) – Boaz Jan 06 '13 at 21:28
  • Thanks Alexander and Boaz! I knew that those attributes existed, but I thought they were deprecated from the W3C Specifications. – Shrey Gupta Jan 06 '13 at 22:54