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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну а должно быть как? Какое по-вашему должно быть поведение у браузеров?


Для кода devote не должно быть никакой бяки.

А какой смысл в том, что я тут это распишу? Ни я, ни Вы не повлияем ни на разработчиков Гугл, ни на Оперу... Но на мой взгляд, если путь к картинке указывать прямо в адресной строке браузера, то он должен хотя бы отцентрировать ее по горизонтали и вертикали если она меньше размеров экрана. Это как минимум упростит жизнь программистам, которые делают показ фото как переход по ссылке.

Я только утверждаю, что при присвоении одного и того же src событие img.onload в одних браузерах сработает 2 раза, а во вторых только 1 раз. Последствия зависят от того, что в обработчике.

<script>
var img = new Image();
img.onload = function() {
    alert( [ "width: " + this.width, "height: " + this.height ] );
}

//1  
img.src = "http://javascript.ru/forum/images/smilies/smile.gif";

//2  
img.src = "http://javascript.ru/forum/images/smilies/smile.gif";
  
</script>

В вашем примере src у img не изменяется, ничего странного, что события нет.

Если src не изменяется, то события нет - согласен с новым веянием. Тогда не странно ли, что в IE8 и Opera11 событие всё же возникает?
Во-вторых, на тех сайтах где по клику по превьюшке изображение скрывалось, а по onload показывалось - это перестало работать в случаях, когда пользователь второй раз подряд клацает по превьюшке (как ни странно, распространенное явление).

FF 11 - всё так и происходит.

Осёл и опера - г-но. =)
За быдлокод надо отвечать.

Вообще вы все задолбали: когда мне надо было писать превьюшку - я вообще не указывал никаках размеров вручную, центрировал всё css'ом и всё прекрасно работало с любыми вариантами.

в опере тоже все это дело:
вопрос спорный, но если смотреть результаты тестов браузеров.. то по ошибкам все браузеры далеко впереди чем опера. Может опера и не поспевает за всеми с внедрением стандартов, но JS работает лучше чем у других браузеров. http://test262.ecmascript.org/ может опера и говно на ваш взгляд, но далеко не на последнем месте по работоспособности.

Не будем холиварить. Просто субъективно опера доставила мне в общей сложности даже больше НЕНАВИСТИ чем ие.)

для каждого свое, тут нет выигравших.. Каждый разработчик имеет свои негативы к тому или иному браузеру. А популярность браузера еще не делает его лучшим. Мне ФФ доставил прилично хлопот в свое время. Но это было пару лет назад. Щас не знаю, может он и лучше стал.

В любом случае нужно ссылаться не на прошлые ошибки а на текущие. А то многие в прошлом получили негатив, а сейчас и понятия не имеют что оно уже на сегодняшний день из себя представляет. И продолжают на старых эмоциях срать по сей день то что срали год/два/три и т.д. лет назад. Нет что бы взять и получить новые эмоции.

Aetae, присоединяюсь к Вам насчет Оперы.

Понятное дело. Но лично мои эмоции возникают, когда я жду, не дождусь, когда же эти старые ошибки наконец исправят?!
Вот пример в Opera.

<html>
<body>
<script>
var d = document.createElement('DIV')
    d.style.cssText = 'position:absolute; top:0px; left:0px; height:100%; width:200px; background-color:#FFAAAA';

document.body.appendChild(d);
  
</script>
</body>
</html>

-Если Вы выполните этот код в полностью раскрытом браузере на весь экран, а потом нажмете F11 (Full Screan), то розовый прямоугольник не примет 100%-ю высоту.
-Если Вы выполните этот код в не полностью раскрытом браузере, а потом потяните за нижнюю грань окна, то то розовый прямоугольник также не примет 100%-ю высоту.
Это только в Опере.

Плохой пример.. это всего лишь разница в том, что Опера делает перерисовку страницы лишь при изменении ширины экрана.. Хотя конечно это можно назвать и Багом, но жизнь он не портит. Не вижу в этом того из-за чего нужно говорить о браузере что он Говно. В каждом браузере своих багов полно, поэтому называть их тогда уж нужно все говном а не только один. Вот если бы браузер прям сплошь и рядом был покрыт багами тогда можно его назвать говном. Мне вот например в ФФ не нравиться то что нельзя сменить ширину поля input с типом file. И тоже висит уже вечность подобный баг, но за это люди не называют же его говном.

1. Я не подыскивал специально "хороший" пример. Я дал именно тот, который мне попортил жизнь. Только не спрашивайте как попортил, насколько попортил... но пришлось извращаться, чтобы это исправить. Могу еще добавить, что в ряде продуктов (сервисов) Гугл была надпись: продукт поддерживается всеми браузерами, за исключением Opera! Это для Вас аргумент?

2. Я не произносил слово "говно". Речь идет об удовлетворении желания пользователей работать в своем любимом браузере. Пользователи любят браузеры за что угодно. За плагины, за всякие фишки... и им плевать на баги и проблемы программистов. Я браузер оцениваю не по фишкам, а по количеству доработок кода, который он требует под себя. И могу откровенно сказать, что на сегодняшний день я ненавижу все браузеры, кроме Google Chrome. И не потому, что он голубенький. А потому что то, что я задумал - то Chrome и показал. А в других - вечно что-то вылезет боком! Даже если делаешь всё по стандарту.

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

Я конечно не утверждаю что Опера идеальный браузер, как я писал выше у всех есть свои баги. Я знаю точно что у оперы есть давнешние баги которые реально критичны, но их отсилы пяток штук. А что я чаще всего от людей слышу на вопрос что-же в нем говеного, один единтсвенны ответ: "Опера плохо поддерживает стандарты". На что я спокойно могу ответить полнейшая ложь. Ибо Опера наоборот делает все по стандартам, а то что у других браузеров есть экспериментальные свистелки/перделки это еще не делает браузер идеальным, на то они и экспериментальные.

Нет конечно, это давно известно что гугль специально не делает под оперу и всячески пытается не запускать свои сервисы под ней.. И не потому что опера что-то не умеет, а просто потому что им так захотелось.

Полнейшая ложь, тут я с вами не соглашусь, если делать по стандарту все браузеры все отображают одинаково. На это я могу сказать проще, вы просто не умеете читать стандарты или просто в них что-то не так поняли. Что чаще всего и происходит. А многие вообще их не читают и при этом думают что делают по стандартам.

вот ёлки... меня не слышат. я дал один пример просто потому, что дал один пример. у меня листов 10 исписано (испечатано) багов, с которыми я лично столкнулся. и очень много по опере.
не вижу смысла комментировать дальнейшее, т.к. желающие могут проследовать в другую ветку форума на просмотр: "Битва титанов III. Opera против всех". но я не пойду.

Хотелось бы на них взглянуть... Вы будите первым кто мне выдаст реальные аргументы против Опера.

где про это можно почитать?

я проверял по интервалу, когда же там к элементу стиль применится ...

на официальном сайте оперы

Маэстро, и да ваш баг решается простым добавлением в стиль тега body стопроцентную высоту:

<html>
<body style="height: 100%;">
<script>
var d = document.createElement('DIV')
    d.style.cssText = 'position:absolute; top:0px; left:0px; height:100%; width:200px; background-color:#FFAAAA';
 
document.body.appendChild(d);
   
</script>
</body>
</html>

Маэстро, боюсь ваш список покрыт наверно подобными вещами которые вы считаете багами. Тогда увы но это не баги а нормальное поведение браузера. Просто вы видимо не знаете того что теги позиционируются относительно родительских элементов а не окна браузера. А так как body это тоже блочный элемент то он не раздвигается при изменении высоты потому что у него не указано это в правилах CSS. Плохо читаете стандарты.

А попортил жизнь вам не браузер, а ваша неопытность и незнание. И винить браузер за отсутствие знаний, я не считаю правильным.

devote,
Вы упорно хотите втянуть меня в эту дискуссию!... а я не хочу. Поэтому повторяю последний раз: я не говорил слово "говно". Я даже не говорил слово "баги". Я сказал, что браузер я оцениваю по количеству доработок кода, который он требует под себя. И если из 5 браузеров 4 браузера не требуют body style="height: 100%;", а Опера требует, то она мне этим не нравится! Не вообще не нравится, а именно этим моментом. Тот же подход и к другим браузерам.
Но если Вам нравится разгребать изучать вот такие ситуации в браузерах (я специально не сказал баги), то, например, объясните вот это (с точки зрения "стандартов"):
http://javascript.ru/forum/css-html-...ole-input.html

Опера просто делает так как описано в стандартах.. Вот именно по этому ее многие не любят, потому что стандарты не всем нравятся.

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

devote,
Дело не только в багах. Дело еще в некоторой принципиальности Оперы в некоторых вопросах, по которым ничего изменить нельзя. Например, эффект "синей рамки" на сфокусированных элементах, который отменить нельзя, это вопросы связанные с двойным кликом и меню по правой кнопке мыши, это никому не нужное накопление памяти по 50 KB при чтении данных в IFRAME и т.д.

хм что за эффект? это тот что появляется при нажатии shift-tab ? а кому это мешало?

Я считаю удобным действием когда двойным кликом выделяется текст и открывается меню. И это можно отменить простой отменой действия по умолчанию. А что насчет правой клик мыши? Вам опера запрещает его перехватить? Хм.. что-то проблем в этом не возникало никогда. Все легко перехватывается.

А зачем туда читать данные? Мало других способов? или я что-то не знаю?

такс... дискуссия продолжается. я буду отвечать всё меньше, потому что мы в чужой ветке и вообще это бесконечный спор о том что вкуснее: суп или борщ.
да.
http://javascript.ru/forum/css-html-...ego-fokus.html
мешало это вебмастеру. точнее заказчику, который считал, что это портит дизайн сайта.

Я тоже считаю удобным когда двойным кликом выделяется текст, но пользуюсь Ctrl-C, Ctrl-V. постоянно выпадающее меню раздражает. будете доказывать, что оно прекрасно?

затем, что например, аджаксом можно передавать/принимать данные, но не файлы. для отправки файла необходима форма и результат ее отправки принимается в iframe.
затем, что есть старые сайты, которые работали бы себе на iframe и черт с ними, но Опера однажды ввела фичу: просмотр изображений - микрокопий сайтов, которые открыты в закладках. это привело к тому, что при загрузке данных в iframe тоже создаются (автоматически) такие же никому ненужные изображения. опять скажете быдлокод? как бы там ни было, есть понятие реинжиниринга. со временем сайт должен подлежать переделке. но кто оплатит это? вы готовы оплатить реинжиниринг?

об этом сочетании клавиш мало кто знает, и это не косяк/баг а удобная фича, от таких криворуких програмистов которые через попу делают сайты где лишь данная возможность спасает... Или к примеру могу привести пример с одним роутером от длинка, где у них вебинтерфейс сделан именно с подобной проблемой. Где ссылки уходят за экран и даже скрола нет... И лишь только эта фишка оперы спасает в подобных ситуациях.. Так что может для тебя это и не удобно, но я считаю это самой оригинальной фичей... О которой все равно мало кто знает. Вот если бы она выделял при обычном нажатии таба, тогда это можно было бы назвать багом.

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

Не встречался с подобной ситуацией.. пример кода приведете? Как в эти микрокопии может попасть скрытый iframe понять мне сложно.

Как я вижу вы мне приводите не баги оперы, а не удобные для вас фишки интерфейса браузера... Если вам не нравится юзабельность браузера, так и скажите а не пытайтесь спорить о возможностях браузера с работой веб-сайтов. Мне как разработчику лично всеравно что и какие фишки встроены в браузер... Это проблемы пользователей а не веб-мастеров. И решать тут самим пользователям а не веб-мастерам, что для них удобно а что не удобно.

та ладно...
на этом закончим.

Добавлю вот еще что. Если вы хотите привести мне аргументы против браузера не со стороны клиентского интерфейса, который пользователь настраивает на свое усмотрение как пожелает.. А со стороны webAPI, то будьте добры приводите их. Все что происходит у клиента, это впервую очередь у клиента и его выбор никак не должен ограничиваться только лишь тем что какой-то заказчик захотел что бы такой-то плагин у юзеров не работал на их сайте.. Это называется не разработка сайтов, а хакинг. Когда ваш сайт всячески пытается отключить то ради чего пользователь выбрал этот браузер.

Люди пишут свои плагины/расширения для браузеров, и выкладывают их на всеобщее использование. Дык по вашему я как разработчик сайтов должен соглашаться с заказчиком на то что он не хочет видишь ли что бы какой-то плагин/расширение работали на его сайте. На это я спокойно отвечу заказчику. Если вам это не по душе это не значит что многим оно тоже не по душе.

Люди выбирают продукт не по желаниям какого то заказчика, а по своим собственным. И если человек выбрал продукт а кто-то пытается ограничить/отключить то ради чего человек выбрал продукт, то просто тот кто пытается это сделать пойдет лесом. По крайней мере с моей стороны оно именно так и происходит. Если я захожу на сайт и вижу куча ограничений, то я больше туда никогда не захожу.

да думаю хватит... но пост я уже успел накатать... не видел твоего сообщения пока писал пост.