我在一个页面上显示了 100 张图片，它们的宽度为 和高度属性改变。图像 ID 处于循环中。
如何在这个循环中获得原始图像大小？
$(this).appendTo(".prod_image").attr('height',150).attr('width',150).attr('title','').attr('name','').attr('alt','').attr('id','id'+i);
【问题讨论】：
您可以使用 dom 对象的 naturalWidth 和 naturalHeight 属性来检索图像的原始尺寸。
例如。
var image = document.getElementById('someImage');
var originalWidth = image.naturalWidth;
var originalHeight = image.naturalHeight;
使用 jQuery，它看起来像：
var image = $('#someImage');
var originalWidth = image[0].naturalWidth;
var originalHeight = image[0].naturalHeight;
【讨论】：
HTML：
<img id="myimg" src="http://azart-cash.ru/big_pics/kazino_AzartPlay.png"
width="120" height="140"/>
JavaScript：
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = $("#myimg").attr('src');
【讨论】：
获得原始大小的唯一方法是将其恢复到原始状态。您可以通过克隆图像轻松完成此操作，然后删除高度和宽度属性以获取实际值。然后，您还必须将更改后的图像插入页面，否则它不会具有计算的高度/宽度。您可以在屏幕外 div 中轻松完成此操作。这是一个例子：
JS：
// Copy the image, and insert it in an offscreen DIV
aimgcopy = $('#myimg').clone();
$('#store').append(aimgcopy);
// Remove the height and width attributes
aimgcopy.removeAttr('height');
aimgcopy.removeAttr('width');
// Now the image copy has its "original" height and width
alert('Height: '+aimgcopy.height()+' Width: '+aimgcopy.width());
CSS：
#store { position: absolute; left: -5000px; }
HTML：
<img id="myimg" src="http://sstatic.net/so/img/logo.png" width="300" height="120"/>
<div id="store"></div>
【讨论】：
我必须使用我创建的 jQuery 插件执行类似的任务。它保持输入文本值的状态，但该原理可以很容易地用于您的宽度和高度。
我将创建一个自定义对象来存储原始对象的 ID、宽度和高度。然后将该对象放入一个数组中。当需要恢复值时，只需循环自定义对象数组以匹配 ID 和宾果游戏，即具有原始宽度和高度的对象。
您可以在www.wduffy.co.uk/jLabel 查看我的插件代码，了解我是如何实现的。不过，根据您要更改的图像数量，阵列可能会变得有点重。
一个例子可能看起来像
var states = new Array();
function state($obj) {
// Public Method: equals
this.equals = function($obj) {
return $obj.attr('id') == this.id;
};
// Public Properties
this.id = $obj.attr('id');
this.width = $obj.attr('width');
this.height = $obj.attr('height');
};
function getState($obj) {
var state;
$.each(states, function() {
if (this.equals($obj)) {
state = this;
return false; // Stop the jQuery loop running
};
});
return state;
};
【讨论】：
试试这个：
$("<img>")
.attr("src", element.attr("src"))
.load(function(){
MG.originalSize[0] = this.width;
MG.originalSize[1] = this.height;
});
【讨论】：