FlexSlider：如何使用JS或jQuery獲取頁面加載時的圖片高度？

在我的網站上使用FlexSlider，我試圖獲得滑塊中第一個圖像的高度。我認爲下面的代碼可以完成這項工作，但是看起來像圖片加載得很晚，所以他們在這個jQuery事件上沒有高度。該代碼將返回「0」。FlexSlider：如何使用JS或jQuery獲取頁面加載時的圖片高度？

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

但是，如果我在瀏覽器控制檯中加載頁面後運行此代碼，返回正確的高度。

如何使用jQuery或JavaScript在頁面加載/準備好時獲得圖像高度？

來源

2013-02-11 Chris

順便說一句：window.load事件的document.ready之後發生，所以您的document.ready是毫無意義的 – reinder 2013-02-11 10:35:14

感謝澄清的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); 
     } 
    }); 
});

來源

2013-02-11 13:29:03 Chris

就緒事件發生在HTML文檔加載後，而onload事件發生在稍後，當所有內容（例如圖像）也被加載時。

onload事件是DOM中的標準事件，而ready事件特定於jQuery。就緒事件的目的是在文檔加載後它應儘早發生，以便爲頁面中的元素添加funcionality的代碼不必等待所有內容加載。

見window.onload vs $(document).ready()

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

見DEMO http://jsfiddle.net/ducwidget/cufsn/1/

來源

2013-02-11 10:46:13

感謝澄清的window.load事件的document.ready後發生，即使這沒有什麼與實際問題有關。請參閱下面的答案。 – Chris 2013-02-11 13:30:04

FlexSlider：如何使用JS或jQuery獲取頁面加載時的圖片高度？

回答

相關問題