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

Question

在我的网站上使用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在页面加载/准备就绪时获取图像高度？

- Chris

---

顺便说一下：window.load事件发生在document.ready之后，所以你的document.ready是无意义的。 - reinder

Answer 1

感谢您澄清窗口加载事件发生在文档准备就绪之后，尽管这与实际问题无关。代码返回“0”的原因是默认的flexslider.css中有一个CSS类：

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

解决方案是等待滑块加载完全，通过使用回调 API（callback API）实现：

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

- Chris

Answer 2

ready 事件发生在 HTML 文档加载完成后，而 onload 事件在所有内容（如图片）也已加载完成后发生。

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

参见 window.onload vs $(document).ready()。

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

请参考演示 http://jsfiddle.net/ducwidget/cufsn/1/

- Dumitru Chirutac

---

感谢您澄清窗口加载事件发生在文档准备之后，尽管这与实际问题无关。请查看下面的答案。 - Chris