FlexSlider: How to get image height on page load using JS or jQuery?

Question

Using FlexSlider on my site, I'm trying to get the height of the first image in the slider. I thought the following code would do the job, but it seems like the images are loaded very late, so that they have no height on this jQuery event. The code will return "0".

$(window).load(function() {
    $(document).ready(function() {
        var height = $(".flexslider>div>ul>li.flex-active-slide>a>img").height();
        console.log(height);
    });
});

But if I run this code in my browser console after the page has loaded, the correct height is returned.

How can I get the image height on page load/ready using jQuery or JavaScript?

Answer 1

Thanks for clarifying that the window.load event occurs after document.ready, even though this had nothing to do with the actual problem.

The reason why the code returned "0", was due to a css-class in the default flexslider.css:

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

The solution was to wait until the slider had loaded properly, by using the callback API:

$(window).load(function() {
    $(".flexslider").flexslider({
        start: function() {
            var height = $(".flexslider a>img").first().height();
            console.log(height);
        }
    });
});