3

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

4

2 回答 2

4

感谢您澄清 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 */

解决方案是使用回调 API等到滑块正确加载：

$(window).load(function() {
    $(".flexslider").flexslider({
        start: function() {
            var height = $(".flexslider a>img").first().height();
            console.log(height);
        }
    });
});
于 2013-02-11T13:29:03.830 回答
1

ready 事件在 HTML 文档被加载之后发生，而 onload 事件在稍后发生，此时所有内容（例如图像）也已加载。

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

请参阅 window.onload 与 $(document).ready()

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

见演示http://jsfiddle.net/ducwidget/cufsn/1/

于 2013-02-11T10:46:13.017 回答