Get Each Image Natural Height With jQuery

Question

I have to read each images' natural height and I should make calculations. However I have some problem with read to natural height.

$('div.imgkirp img').each(function(){     console.log($(this).naturalHeight); }); 

It gets : (images number) undefined in console log. How can i read each of images' natural height ?

Answer 1

Try to use property naturalHeight of image, using the prop method of the jQuery

$('div.imgkirp img').each(function(){     console.log($(this).prop('naturalHeight')); }); 

Answer 2

var image = new Image(); image.src = $(this).attr("src"); alert('width: ' + image.naturalWidth + ' and height: ' + image.naturalHeight); 

This approach doesn't work in IE 8 and below versions, because it doesn't support 'naturalWidth' and 'naturalHeight' properties. To achieve the same use this code

var image = new Image(); image.src = $(this).attr("src"); image.onload = function() { console.log('height: ' + this.height); };