resize后获取实际图像大小

我有一个用缩略图填充的页面，用cssresize到150x150 ，当我点击缩略图时，页面变暗，并且图像显示在它的真实尺寸中。

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

我试过了：

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

和：

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

但两者都返回CSS分配的150px属性。 我怎么解决这个问题？ 谢谢

Answer 1

您可以这样做的一种方法是创建一个单独的图像对象。

 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请求。

Answer 2

你有’天生’的kws来帮助你：

与js：

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

或者使用jquery

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