Javascript FlexSlider：如何使用JS或jQuery在页面加载时获得图像高度？

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

$（窗口）.load（函数（）{
$（文档）.ready（函数（）{
var height=$（“.flexslider>div>ul>li.flex活动幻灯片>a>img”）.height（）；
控制台。原木（高度）；
});
});

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

---

如何使用jQuery或JavaScript获取页面加载/就绪时的图像高度？

就绪事件发生在加载HTML文档之后，而onload事件发生在加载所有内容（例如图像）之后

onload事件是DOM中的标准事件，而ready事件特定于jQuery。ready事件的目的是，它应该在文档加载后尽早发生，以便向页面中的元素添加功能性的代码不必等待加载所有内容

见

---

请参阅演示

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

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

.flexslider.slides>li{display:none；-webkit backface visibility:hidden；}/*在加载JS之前隐藏幻灯片。避免图像跳跃*/

解决方案是使用以下方法等待滑块正确加载：

$（窗口）.load（函数（）{
$（“.flexslider”）.flexslider({
开始：函数（）{
变量高度=$（“.flexslider a>img”）.first（）.height（）；
控制台。原木（高度）；
}
});
});

顺便说一句：window.load事件发生在document.ready之后，因此您的document.ready是无意义的。请澄清window.load事件发生在document.ready之后，尽管这与实际问题无关。请看下面我的答案。

  $(document).ready(function() {  
       console.log($('.flexslider > ul > li > a > img').height()); 
  });