This question is an exact duplicate of:
I have some images that are not small and I need to use jQuery to get their height and width after they have loaded in the respective div. This question has been asked before and I tried many of the suggestions. For example: The following code was suggested and it only works intermittently on each page refresh:
jQuery(function() {
jQuery(".youtube-image-thumbnail img").on('load', function() {
console.log(jQuery(this).height());
});
});
This solution did not work at all
jQuery(function() {
console.log('here')
jQuery(".youtube-image-thumbnail img").bind('load', function() {
console.log(jQuery(this).height());
});
});
My html element looks like this:
<div class="youtube-image-thumbnail">
<img src="/youtube_image/public/video_thumbnails/exvLChu1-fk.jpg?itok=q0nFDq8g" alt="" typeof="foaf:Image" class="img-responsive">
</div>
Here is a JsFiddle snippet Am I missing anything or is there a better more sound solution?