В IE не извлекаются размеры скрытой картинки

[ingwarr]

Доброго времени суток.

Как можно извлечь в IE размеры скрытой картинки?

Например есть картинка

<img class="picimg" src="'image/test.jpeg" style="display:none;" />

надо узнать её размер и исходя из этого, отцентрировать относительно размера экрана, извлекал так:

var height = $(".picimg").attr("height");
var width = $(".picimg").attr("width");

во всех нормально, кроме IE, в нем размеры по нулям.

[Octane]

visibility:hidden, вместо display:none. Методы width и height, атрибутов у вас в примере нет.

[SindBad]

visibility:hidden, вместо display:none.

Только есть один момент: место в общем потоке, зарезервированное под элемент, остаётся. Если это нежелательно, то position: absolute, либо "показывать" (display:none/block) картинку на момент замера и скрывать после. Это приемлемо, если общий код не тяжёлый - тогда юзер ничего не заметит.

[Aetae]

>Это приемлемо, если общий код не тяжёлый - тогда юзер ничего не заметит.
Это неприемлемо никогда, ибо вызывает 2 лишних и бессмысленных перерисовки.
Обычно картинку просто уводят далеко за левый верхний угол, с помощью position: absolute.

Кстати большинство ситуаций, когда на ум приходит необходимость учитывать заранее неизвестный размер картинки, решается с помощью css без этого.

[razerxxx]

а так тоже размеры не определены?
$(".picimg").width();
$(".picimg").height();

[Маэстро]

Я с данной проблемой боролся по всякому. Могу добавить еще, что размеры не будут выданы, пока картинка в принципе не загрузится. При отображении в одном месте последовательно нескольких картинок (что-то типа слайд-шоу) при больших размерах картинок, при медленном интернете возникают всякие неприятности. Если на время загрузки прятать картинку ("далеко за левый верхний угол"), то некоторое время пользователь не видит ничего - раздражает. Если не прятать, то пока грузится новая картинка - её размеры искажаются размерами от предыдущей картинки.
Чтобы побороть всё это я нашел пока один путь: сервер должен знать размеры картинки (хранить в базе данных) и при отсылке клиенту src новой картинки одновременно сообщать ее размеры. Тогда проблема нулевых размеров отпадает.

[devote]

сервер должен знать размеры картинки (хранить в базе данных) и при отсылке клиенту src новой картинки одновременно сообщать ее размеры. Тогда проблема нулевых размеров отпадает.

А чем такой вариант не угодил:

var img = new Image();
img.onload = function() {
    alert( [ "width: " + this.width, "height: " + this.height ] );
}
img.src = "http://javascript.ru/forum/images/smilies/smile.gif";

[Маэстро]

А чем такой вариант не угодил:
img.onload = function()...

Не угодил тем, что у Вас размеры картинки 20х20 px, а Вы попробуйте 1920х1080px (Full HD). При входе в интернет через GSM-модем фото грузится несколько секунд. Если на это время его прятать - плохо (люди не хотят тупо смотреть в черный экран и ждать, а хотят видеть с самого начала по ходу загрузки). Если размеры заранее не известны, то происходят искажения размеров. Кстати все браузеры в принципе при загрузке больших фото, превышающих размер экрана грузят их некрасиво. И только после полной загрузки производят масштабирование и центрирование. Попробуйте на практике - Вы всё это увидите сами.

[devote]

Попробуйте на практике - Вы всё это увидите сами.

да я и так знаю как это работает.

И только после полной загрузки производят масштабирование и центрирование.

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

[Маэстро]

Если же в теге IMG явно указан размер, то он так и остается, просто рисунок масштабируется под нужный размер.

Вот именно! И картинка светится вся перекошенная. Особенно прикольно, когда предыдущее фото было формата "портрет", а следующее формата "альбом". А еще одна бяка вылезла в последних версиях Google Chrome и, по-моему уже и в Fire Fox: если прописать в img, тот же самый src, что был перед этим, то событие onload не срабатывает вообще. Соответственно нельзя произвести какие-то действия, которые были предусмотрены в обработчике.