Блог

Я пытаюсь поместить div (вводный текст) в другой div (вводный контейнер). Для этого я использую css и jQuery.

 .intro-text {
width: 35%;
margin-left: auto;
margin-right: auto;
display: block;
}
  

В div (вводный текст) есть изображение, которое имеет адаптивную ширину / высоту. Он имеет ширину 35% от родительского контейнера (вводного контейнера).

Мне нужна высота вводного текста div, чтобы разместить его в контейнере. Он работает нормально, за исключением первой загрузки. Он возвращает 40 пикселей (высоту текста).

 $(document).ready(function(){

        backgroundResize();

        $(window).resize(function(){
            backgroundResize();
        });
    });

function backgroundResize(){
console.log("height:"   $(".intro-text").height());
}
  

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

 <div class="intro-container container">
    <div class="intro-text">
  <p><img src="intro.png"><br>
Address, Phone, .</p>
    </div>
</div>
  

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

Вызовите функцию backgroundResize() при событии onload .

     $(document).ready(function(){

            $(window).resize(function(){
                backgroundResize();
            });

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

        });