Get Höhe des Containers mit reagierenden Bild

Question

Ich versuche, ein Div (Intro-Text) in einem anderen Div (Intro-Container) zu positionieren. Ich benutze css und jQuery, um das zu tun.

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

In der div (Intro-Text) gibt es ein Bild, das eine ansprechende Breite/Höhe hat. Er hat eine Breite von 35% des übergeordneten Containers (Intro-Container).

Ich brauche die Höhe des Intro-Text Div, um es in den Container zu positionieren. Es funktioniert gut, außer bei der ersten Ladung. Es gibt 40px (die Höhe des Textes) zurück.

$(document).ready(function(){ 

     backgroundResize(); 

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

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

Es scheint, dass das Bild noch nicht geladen ist, so gibt sie den falschen Wert .. Auch wenn die Verwendung Dokument bereit .. Wie kann ich dieses Problem beheben?

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

Answer 1

Das ready-Ereignis tritt auf, nachdem das HTML-Dokument geladen wurde, während das Onload-Ereignis später eintritt, wenn alle Inhalte (zum Beispiel Bilder) auch geladen wurde.

Rufen Sie die Funktion backgroundResize() beim Onload-Ereignis auf.

$(document).ready(function(){ 

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

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

     });