JQuery load event on images

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!

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.

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().

Basically, you want to listen to load or readystatechange events from the img element.

So you need to do this:

$(window).load(function(){
    $('.image-principale img').on("load readystatechange", function(){
        // Here you can check whether it state complete by checking 
        // if(this.complete || (this.readyState == 'complete' && e.type == 'readystatechange') ) { }
        $(this).parent().css('height', $(this).height());
    });
});

But... this way have a few ( big ) caveats. Namely that it will not "always" work, and it will not work with "cache" images ( sometimes ). The best way is actually an extent of the code above ( that will check some more conditions that are quite hard to check ) from Desandro, a library called jquery.imagesLoaded

It will check for loading events, and some more conditions ( like broken images, cached images, loaded element, ... ) and gives you a feedback when ALL elements are loaded.

Usage is ( you can see more on the website ) :

// Loading script 
var dfd = $('#my-container').imagesLoaded(function($images, $proper, $broken){
    //Here you can do a loop on $proper that is the list of images that properly loaded.
}); // save a deferred object and use dfd later

You can also have, for every image loaded, a callback:

dfd.progress(function( isBroken, $images, $proper, $broken ){ });

I'm quite sure this will solve your ( very old... sorry ) problem. I post it here as it could help some other people.

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

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

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

来源：https://stackoverflow.com/questions/2174119/jquery-load-event-on-images

标签

jquery

image

load

handler