Nhận kích thước hình ảnh thực tế, sau khi đổi kích thước ảnh

Question

Tôi có một trang có hình thu nhỏ, được đổi kích thước bằng css thành 150x150 và khi tôi nhấp vào hình thu nhỏ, trang bị mờ và Hình ảnh được hiển thị ở kích thước thật.

Hiện tại, tôi phải tạo thủ công một mảng bao gồm chiều cao thực tế của tất cả các hình ảnh. Để giải quyết vấn đề thiết kế + hoạt động ít thủ công hơn trong thư viện của tôi, tôi cần phải có chiều cao thực tế của hình ảnh, sau khi tôi đổi kích thước hình ảnh (CSS).

tôi đã cố gắng:

var imageheight = document.getElementById(imageid).height; 

Và:

var imageheight = $('#' + imageid).height(); 

Nhưng cả hai trở lại 150px thuộc tính được gán với CSS. Làm sao tôi có thể giải quyết việc này? Cảm ơn

Answer 1

Một cách bạn có thể làm là tạo một đối tượng hình ảnh riêng biệt.

function getImageDimensions(path,callback){ 
    var img = new Image(); 
    img.onload = function(){ 
     callback({ 
      width : img.width, 
      height : img.height 
     }); 
    } 
    img.src = path; 
} 

getImageDimensions('image_src',function(data){ 
    var img = data; 

    //img.width 
    //img.height 

}); 

Bằng cách đó, bạn sẽ sử dụng cùng một hình ảnh chứ không phải hình ảnh trên DOM có kích thước được sửa đổi. Hình ảnh được lưu trong bộ nhớ cache, theo như tôi biết, sẽ được tái chế bằng phương pháp này. Vì vậy, không phải lo lắng về các yêu cầu HTTP bổ sung.

Answer 2

bạn có Kw 'tự nhiên' để giúp bạn ra ngoài:

với js:

var imageheight = document.getElementById(imageid).naturalHeight; 

hoặc với jquery

var imageheight = $('#' + imageid).naturalHeight;