Jquery tìm chiều cao hình ảnh không hoạt động

Question

Tôi đang cố gắng sử dụng jQuery để tìm chiều cao hình ảnh của "đứa con lớn" đầu tiên của một vùng chứa, sau đó đặt vùng chứa thành chiều cao đó. Nhưng, tôi dường như không thể kéo thuộc tính chiều cao hình ảnh - nhận được src hoạt động. Bất kỳ ý tưởng? Là nó chỉ cố gắng để kéo chiều cao thông qua CSS? Làm thế nào để tôi nhận được "chiều cao thực" Tôi không thể nhập chiều rộng và chiều cao trong thẻ img - vì vậy đó không phải là một lựa chọn; (

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

Từ API docs:

Trong trường hợp mã dựa vào tài sản được nạp (ví dụ, nếu kích thước của một hình ảnh là bắt buộc), mã nên được đặt trong một handler cho sự kiện tải thay thế.

vì vậy, thay vì thực hiện kịch bản của bạn trong $(document).ready(); sử dụng $(window).load(); hoặc tốt hơn y et, $(image).load();. Ví dụ:

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

Lý do bạn không thể lấy kích thước của hình ảnh là chúng chưa có kích thước. Mã chạy sau khi trang đã tải nhưng trước khi hình ảnh được tải.

Chạy phần của mã mà cần kích thước hình ảnh sau khi tất cả các yếu tố trong trang được nạp:

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

Answer 3

bạn nên đợi cho đến khi hình ảnh của bạn được nạp - một cái gì đó dọc theo dòng

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