2010-01-27 29 views
8

Bir kabın ilk "büyük çocuklarının" görüntü yüksekliğini bulmak için jQuery'yi kullanmaya çalışıyorum, daha sonra kabı bu yüksekliğe ayarlayın. Ancak, görüntü yükseklik özniteliğini çekemiyorum - src çalışıyor. Herhangi bir fikir? Yükseklikleri CSS ile çekmeye mi çalışıyor? Nasıl "gerçek yükseklikleri" alabilirim yapamam girdi img etiketi genişlik ve yükseklik - böylece bir seçenek değil; (API docs itibarenJquery, resim yüksekliğini bulamıyor

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

cevap

8

: vakalarda

nereye kod (bir resmin boyutları gerekiyorsa, örneğin) yüklü varlıklara dayanan, kod yerine yük olay için işleyici yerleştirilmelidir.

Bunun yerine komut dosyanızın $(document).ready(); kullanım $(window).load(); veya daha iyi y ve, $(image).load();. Örneğin:

$(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); 
    }); 
}); 
+0

'$ (image) .load();' 'benim için çalışmaz '' görüntü tanımlanmadı '' hatası –

+1

'$ (' img '). Load();' – Pixelsmith

1

Görüntülerin boyutunu alamadığınız nedeni, henüz boyutlarının olmamasıdır. Kod, sayfa yüklendikten sonra ancak resimler yüklenmeden önce çalışır.

Çalıştır sayfasında tüm unsurlar yüklendikten sonra görüntü boyutunu gereken kodun kısmı:

$(window).load(function() { 
    ... 
}); 
3
Resim yüklenene kadar beklemelisiniz

-

$('#imageContainer').children(':first').children(':first').load(function() { 
    alert($(this).height()); 
}); 
hattı boyunca bir şey