Jquery छवि की ऊंचाई को काम नहीं कर रहा है

Question

मैं कंटेनर के पहले "भव्य बच्चों" की छवि ऊंचाई खोजने के लिए jQuery का उपयोग करने की कोशिश कर रहा हूं, फिर कंटेनर को उस ऊंचाई पर सेट करें। लेकिन, मैं छवि ऊंचाई विशेषता खींचने के लिए प्रतीत नहीं कर सकता - स्रोत काम प्राप्त कर रहा है। कोई विचार? क्या यह सिर्फ सीएसएस के माध्यम से ऊंचाई खींचने की कोशिश कर रहा है? कैसे मैं "असली ऊंचाइयों" मिलता है मैं नहीं कर सकते हैं इनपुट चौड़ाई और ऊंचाई 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 docs से:

ऐसे मामलों में जहां कोड भरी हुई संपत्ति पर निर्भर करता है (उदाहरण के लिए, अगर एक छवि के आयाम आवश्यक हैं), कोड एक हैंडलर में बजाय लोड घटना के लिए अपनी स्क्रिप्ट लागू करने की $(document).ready(); उपयोग $(window).load(); या बेहतर में रखा जाना चाहिए।

बजाय y et, $(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

कारण यह है कि आप छवियों का आकार नहीं प्राप्त कर सकते हैं कि उनके पास अभी तक कोई आकार नहीं है। पृष्ठ लोड होने के बाद कोड चलाता है लेकिन छवियों को लोड करने से पहले।

भागो कोड है कि छवि का आकार की जरूरत का हिस्सा के बाद पृष्ठ के सभी तत्वों लोड किए गए हैं:

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

Answer 3

जब तक अपनी छवि भरी हुई है आपको इंतजार करना चाहिए -

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

की रेखा के साथ कुछ