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

Question

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

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

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

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

любые идеи?

Answer 1

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

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

Answer 2

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

#your_image {left:-1000%;}

только тогда

$(this).width()

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

Answer 3

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

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

Answer 4

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