Jquery finde Bildhöhe funktioniert nicht

Question

Ich versuche mit jQuery die Bildhöhe der ersten "grand children" eines Containers zu finden, dann setze den Container auf diese Höhe. Aber ich kann nicht scheinen, das Bildhöhenattribut zu ziehen - das src funktioniert. Irgendwelche Ideen? Versucht man nur, die Höhen über CSS zu ziehen? Wie kann ich die „echten Höhen“ bekommen kann ich nicht geben Sie die Breite und Höhe in img-Tag - das ist also keine Option; (

$(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

Vom API docs:

In Fällen, in denen Code stützt sich auf geladenen Assets (wenn die Abmessungen eines Bildes zum Beispiel erforderlich sind), sollte der Code in einem Handler für das Load-Ereignis statt.

anstatt also Ihr Skript ausführen $(window).load(); oder besser in $(document).ready(); Verwendung platziert y et, $(image).load();. Zum Beispiel:

$(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

Der Grund, dass Sie die Größe der Bilder nicht erhalten können, ist, dass sie noch keine Größe haben. Der Code wird ausgeführt, nachdem die Seite geladen wurde, aber bevor die Bilder geladen wurden.

Führen Sie den Teil des Codes, der die Bildgröße, nachdem alle Elemente auf der Seite benötigt werden geladen:

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

Answer 3

Sie warten sollten, bis Ihr Bild geladen ist - etwas, entlang der Linie von

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