JQuery получить размер изображения

Question

Я создаю фотогалерею, используя jquery. Я беру и изменяю размеры изображений при загрузке, чтобы создавать миниатюры. Я хочу получить исходное значение размера изображения, чтобы позже я смог вернуть его к исходному размеру. Кто-нибудь знает, как это сделать? У меня есть следующий код:

    obj.find("img").each(function(){
}); 

Это перебирает все изображения внутри контейнера div. Затем я попытался сделать:

$(this).width(); //didnt work
this.width; //didnt work

есть идеи?

Answer 1

Недавно я задал тот же вопрос и получил хороший ответ: новый элемент изображения создан, но не присоединен к DOM. Его высота и ширина являются исходными размерами изображения.

Редактировать : Я отредактировал ответ на свой вопрос сейчас, как и было обещано в комментариях. Определение размера изображения теперь связано с событием onload изображения, чтобы гарантировать надежные результаты.

Answer 2

Если элемент скрыт, вы не можете получить его размер, если вы хотите получить его ширину или высоту до его показа, вам нужно задать отрицательное смещение, например

#your_image {left:-1000%;}

только тогда

$(this).width()

вернет вам результат.

Answer 3

$("#your_img").imagesLoaded(function(){<br>
alert( $(this).width() );<br>
alert( $(this).height() );<br>
});

Answer 4

Проблема с использованием jQuery для получения размера изображения состоит в том, что обычно мы используем $ (). Ready (function ()); чтобы выполнить наш javascript, но в этот момент страница загружается, изображение еще не загружено, поэтому вам нужно подождать, пока это произойдет в первую очередь. Как только вы убедитесь, что изображение загружено и изображение видимое, вы можете использовать $ .width () и $ .height () как обычно.

Одна вещь, которую вы также можете попробовать, если вы используете скриптовый язык для генерации размеров изображения, это поставить атрибуты ширины и высоты после чтения файла и получения размера таким образом. Поскольку вы создаете галерею, вы можете изменить размеры своих изображений на серверной стороне с помощью imagemagick из gd для php. Для этих инструментов в Интернете достаточно документации, поэтому я не буду вдаваться в подробности.