在调整大小后获取实际图像大小

我有一个页面充满缩略图，用css调整到150x150，当我点击缩略图时，页面变暗，图像以真实尺寸显示。在调整大小后获取实际图像大小

目前，我必须手动创建一个包含所有图像实际高度的数组。为了解决设计问题+减少手动操作我的图库，我需要在调整图像大小（CSS）后获取图像的实际高度。

我想：

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

和：

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

但都返回与CSS分配150px属性。我该如何解决这个问题？谢谢

来源

2012-05-07 Novak

的可能重复http://stackoverflow.com/问题/ 7682772 /获取图像大小后调整大小 - javascript –

所以你正在加载所有全尺寸的图像，而不是正确的缩略图？ ouch ... – Guffa

我正在加载全尺寸的图像，并在缩略图被点击时显示它。 – Novak

你可以做到的一种方法是创建一个单独的图像对象。

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 

});

这样，您将使用相同的图像，但不是DOM上修改尺寸的图像。就我所知，缓存的图像将使用此方法进行回收。所以不用担心附加的HTTP请求。

来源

2012-05-07 08:04:58 Joseph

谢谢@约瑟夫，现在工作。 – Novak

你有 '自然' KWS帮助你：

与JS：

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

或使用jQuery

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

来源

2012-05-07 11:40:02

伟大的答案，谢谢 – imkost

IE9 +和任何其他主要浏览器，这些属性是有效的。这是一个很好的答案！有人可能会为此包装一个jQuery插件。如果没有，这可能会很有趣。 –

在调整大小后获取实际图像大小

回答

相关问题