javascript – FlexSlider：如何使用JS或jQuery获取页面加载时的图像高度？

在我的网站上使用FlexSlider,我试图获得滑块中第一个图像的高度.我认为以下代码可以完成这项工作,但似乎图像加载很晚,所以它们在这个jQuery事件上没有高度.代码将返回“0”.

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

但是,如果我在加载页面后在浏览器控制台中运行此代码,则返回正确的高度.

如何使用jQuery或JavaScript获取页面加载/准备好的图像高度？

解决方法:

感谢您澄清window.load事件发生在document.ready之后,即使这与实际问题无关.

代码返回“0”的原因是由于默认flexslider.css中的css类：

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

解决方案是等到滑块已正确加载,使用callback API：

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

标签：flexslider,javascript,events,image,height
来源： https://codeday.me/bug/20190901/1781827.html