Jquery найти высоту изображения не работает

Question

Я пытаюсь использовать jQuery, чтобы найти высоту изображения первых «внуков» контейнера, а затем установить контейнер на эту высоту. Но я не могу тянуть атрибут высоты изображения - получение src работает. Есть идеи? Это просто пытается вытащить высоту с помощью CSS? Как я могу получить "реальные высоты"? Я не могу ввести ширину и высоту в тег img - так что это не вариант; (

 $(document).ready(function() {
       var imageContainer = '#image-container';


       var imageSrc = $(imageContainer).children(':first').children(':first').attr('src'); // control test
       var imageHeight = $(imageContainer).children(':first').children(':first').height(); // have also tried attr('height')

       alert(imageSrc + ' ' + imageHeight);

    });


    <div id="image-gallery">
      <div id="image-container">    

        <div class="slide">
          <img src="test1.jpg" alt="test1" />
          <p>
            <strong>This is a test 1</strong>
          </p>
        </div>

        <div class="slide">
         <img src="test2.jpg" alt="test2" />
         <p>
           <strong>This is a test 2</strong>
         </p>
       </div>

      </div>
    </div>

Answer 1

Из документов API :

В тех случаях, когда код опирается на загруженные ресурсы (например, если требуются размеры изображения), вместо этого код должен быть помещен в обработчик для события загрузки.

Так что вместо выполнения вашего скрипта в $(document).ready(); используйте $(window).load(); или еще лучше $(image).load();. Например:

$(document).ready(function() {
    var imageContainer = '#image-container';

    $(imageContainer).children(':first').children(':first').load(function() {
        var imageSrc = $(this).attr('src'); // control test
        var imageHeight = $(this).height(); // have also tried attr('height')

        alert(imageSrc + ' ' + imageHeight);
    });
});

Answer 2

вам следует подождать, пока ваше изображение не загрузится - что-то вроде

 $('#imageContainer').children(':first').children(':first').load(function() {
     alert($(this).height());
 });

Answer 3

Причина, по которой вы не можете получить размер изображений, заключается в том, что они еще не имеют какого-либо размера. Код запускается после загрузки страницы, но до загрузки изображений.

Запустите ту часть кода, которой необходим размер изображения после загрузки всех элементов на странице:

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