Question

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!

Answer 1

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.