FlexSlider: как получить высоту изображения при загрузке страницы с помощью JS или jQuery?

Используя 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?


javascript events image height flexslider
person Chris    schedule 11.02.2013    source источник
comment
Кстати: событие window.load происходит после document.ready, поэтому ваш document.ready бессмысленно   -  person reinder    schedule 11.02.2013

Ответы (2)


arrow_upward
4
arrow_downward

Спасибо за пояснение, что событие window.load происходит после document.ready, хотя это не имело ничего общего с реальной проблемой.

Причина, по которой код вернул «0», связана с классом css в файле flexslider.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);
        }
    });
});
person Chris    schedule 11.02.2013

arrow_upward
1
arrow_downward

Событие готовности происходит после загрузки HTML-документа, а событие onload происходит позже, когда все содержимое (например, изображения) также было загружено.

Событие onload является стандартным событием в DOM, а событие ready специфично для jQuery. Цель события готовности состоит в том, чтобы оно произошло как можно раньше после загрузки документа, чтобы код, который добавляет функциональность элементам на странице, не должен ждать загрузки всего содержимого.

См. window.onload vs $ (document) .ready () 

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

См. ДЕМО http://jsfiddle.net/ducwidget/cufsn/1/

person Dumitru Chirutac    schedule 11.02.2013
comment
Спасибо за пояснение, что событие window.load происходит после document.ready, хотя это не имело ничего общего с реальной проблемой. Пожалуйста, смотрите мой ответ ниже. - person Chris; 11.02.2013