На странице я отобразил 100 изображений, которые имеют измененный атрибут ширины и высоты. Идентификатор изображения находится в цикле.
Как я получаю исходный размер изображения в этом цикле?
$(this).appendTo(".prod_image").attr('height',150).attr('width',150).attr('title','').attr('name','').attr('alt','').attr('id','id'+i);
Мне нужно было выполнить аналогичную задачу с плагином jQuery, который я создал. Он сохраняет состояние для текстового значения inputs, но этот принцип можно легко использовать для ширины и высоты.
Я бы создал пользовательский объект, который хранит 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;
};
Единственный способ получить исходный размер - вернуть его в исходное состояние. Вы можете сделать это довольно легко, клонировав изображение, а затем удалив атрибуты высоты и ширины, чтобы получить реальные значения. Затем вам также необходимо вставить измененное изображение на страницу, иначе оно не будет иметь рассчитанную высоту / ширину. Вы можете легко сделать это в закадровом 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>