Расчет возвращает несколько значений

Question

У меня есть функция jQuery, которая проверяет значения высот дочерних образов, а затем устанавливает высоту родителей на значение самой маленькой высоты изображения, а затем добавляет overflow: hidden, чтобы избежать переполнения.

Я выполняю функцию из события document.ready, однако получаю странные результаты. Я получу HTMLobjectHeight, 0, undefined или правильное значение в pageload. Почему это меняется? он запускается перед загрузкой изображений?

function setContainHeight() 
{ 
    var container = $('.com-background'); 
    var imgs = $('.com-background img'); 
    var smallestImg = imgs[0]; 
    $(imgs).each(function() 
    { 
     if ($(this).height() < $(smallestImg).height()) 
      smallestImg = $(this).height(); 

    }); 

    container.height(smallestImg); 
    container.css("overflow", "hidden"); 
}; 

Еще один вопрос, я имею, когда я добавить эту функцию в window.resize случае он также выстреливает на PageLoad, и дает неопределенный результат.

HTML

<div class="com-background" style="height: 434px; overflow: hidden;"> 
    <h1 class="community_title">Sun Lakes</h1> 
    <img width="250" height="167" src="http://192.168.33.10.xip.io/wp-content/uploads/2013/04/Ocotillo-lake-e1404789921289.jpg" class="wp-post-image" alt="Ocotillo - lake" style="display: block; z-index: 1;"> 
    <img width="250" height="188" src="http://192.168.33.10.xip.io/wp-content/uploads/2013/04/Resort-e1404789892490.jpg" class="attachment-post-secondary-image-thumbnail active" alt="Resort" style="z-index: 3; opacity: 0.988634061784097;"> 
    <img width="837" height="378" src="http://192.168.33.10.xip.io/wp-content/uploads/2014/05/homestead-error.png" class="attachment-post-tert-image-thumbnail" alt="homestead-error" style="z-index: 2;"> <div class="numeric_search"> 
</div> 

SASS/CSS

.com-background 
{ 
    width: 100%; 
    position: relative; 
    img 
    { 
     z-index: 1; 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: inherit; 
     max-width: 100%; 
     height: auto; 
    } 
} 

Answer 1

Для того, чтобы убедиться, что изображения ВГА е был загружен, начните с слушателя $(window).load событий

Я бы также использовать Math.min, чтобы получить самую низкую высоту изображения

$(window).on("load resize", function(event) { 

    // find container 
    var container = $(".com-background"); 

    // get image heights in an array 
    var heights = container.find("img").map(function(idx, elem) { 
    return $(elem).height(); 
    }).get(); 

    // get the minimum height 
    var minimum = Math.min.apply(null, heights); 

    // set container height and overflow property 
    container.height(minimum).css({overflow: "hidden"}); 
}); 

Answer 2

Если вы хотите получить все высоты изображения, вы должны быть уверены, что все изображения были загружены и готовы к используемому ... Для Конечно, вам нужно использовать $ (окно) .load() вместо $ (документ) .read так:

$(window).load(function() { 
    setContainHeight(); 
    $(window).resize(setContainHeight); 
});