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

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

本文关键字：加载 高度 图像 何使用 JS jQuery FlexSlider      更新时间：2023-09-26

在我的网站上使用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 */

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

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

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

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

请参阅window.onload与$（document）.ready（）

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

参见DEMOhttp://jsfiddle.net/ducwidget/cufsn/1/

相关文章：