JQuery load event on images

Question

I want to resize an image parent to the same size of the image, when the images are loaded.

At this time i'm using this code:

$(window).load(function(){
    $('.image-principale').each(function(){
        $(this).parent().css('height', $(this).height());
    });
});

It work, except than it runs only when every image has loaded. I tried to add an load handler to every image directly but they doesn't trigger.

What's wrong?

Thank you!

Answer 1

Works for me: http://jsbin.com/ululo/edit

$(function(){
  $("img").load(function(){
    $(this).parent().height( $(this).height() ); 
  }); 
});

Answer 2

$(window).load() fires only as soon as all data is fetched.

Answer 3

Try the following:

...Your HTML...

<script type="text/javascript">
    $('.image-principale').load(function(){
        $(this).parent().css('height', $(this).height());
    });
</script>

Note that the script must be placed after the HTML, or it will run before the <img> elements exist and will not actually do anything.

You could also try using live, like this:

$('.image-principale').live('load', function(){
    $(this).parent().css('height', $(this).height());
});

However, I don't know whether it will actually work.

Answer 4

On document ready is easy:

$(function() {
  $('.image-principale').load(function(){
    $(this).parent().css('height', $(this).height());
  });
});

or even:

$(function() {
  $('.image-principale').live('load', function(){
    $(this).parent().css('height', $(this).height());
  });
});

outside or inside ready().

Answer 5

$('img').load seems to fire each time the image resizes. In my case it makes my site slow. (I'm tried it on FF)