Свойство width картинки равно 0px
Привет всем!
Возникла проблема с самописной галереей, в общих чертах обрисую её так: <div id='b'> <img id='fullimage' src='' onclick='f()'> </div> <script> var b = document.getElementById('b'); var im = document.getElementById('fullimage'); im.setAttribute('src', 'адрес_картинки'); alert(getComputedStyle(im).width); //почему 0? Не пойму, на каком этапе будет видна ширина картинки? Я же вроде уже прописал источник, откуда будет тянуться картинка... function f() { alert(getComputedStyle(im).width); //вот здесь уже корректная ширина } </script> Также хочу спросить: возможно ли сделать так, чтобы высота отображалась сразу? |
Цитата:
Жди события @load на картинке. Но перед этим проверь свойство .complete картинки. Если картинка есть в кэше, то оно равно true, и события @load не будет (по-моему в некоторых браузерах будет, но это неважно) |
Я тоже сначала думал что за бред - сначала грузим картинку в пустой объект, потом из него src пихаем в другой src и, типа, железобетонно у нас есть такая картинка в кеше и можно уже продолжать.
Оказалось что без этого пустого объекта код превращается из event-driven, в хзч. Так что грузите в пустой объект, и работайте с load, на все .complete совершенно кладите. От так-то. |
/* пустой объект, событие load которого сработает всегда, в любом даже самом хитрожопом браузере типа Хрома */ var img=new Image(); /* запрограммировать событие загрузки надо до впаривания src */ img.onload=function(){ /* внутри кложи this - это оно само, загруженная картинка */ im.src=this.src; /* теперь можно профыкать в src элемента */ /* у этого объекта нет еще стилей, но зато есть нормальные height, width */ alert(this.width); // тут все понятно }; /* с этого момента браузер кОчает картинку в пустой объект */ im.src='адрес_картинки'; В принципе из этого объекта можно сделать элемент. Если вы пользуетесь стилями канонично, то можно просто заменять тот элемент - на этот элемент, а не переписывать src. |
на всякий случай
Цитата:
|
Ну да, а то получится те же яйца вид снизу.
|
Цитата:
im.src=this.src;и почему запрограммировать событие загрузки надо до впаривания src. Объсните, пожалуйста, нубу) Ещё интересный момент, забыл упомянуть в 1ом посте: var b = document.getElementById('b'); var im = document.getElementById('fullimage'); im.setAttribute('src', '1.jpg'); console.log(getComputedStyle(im)); //в консоли уже прописано св-во width, причём корректно! Т.е., getComputedStyle() уже вернула коллекцию CSS-стилей! alert(getComputedStyle(im).width); //но здесь же 0px. Какого рожна?) |
Цитата:
|
Цитата:
Как мог популярно изложил принцип callback'ов. Что такое callback вообще, в миру? Это обратный звонок. Вы звоните в контору, выбираете в голосовом меню сделать callback, ваш номер запоминается. Сотрудник в будущем откроет список и наберет вам. Еще колбэки юзали в модемную эпоху когда связь в направлении клиент-сервер оказывалась хуже чем в направлении сервер-клиент из-за коллизий на АТС. |
Что касается стилей - в новом объекте их нет, а после смены src наверно слетают. Не надо думать про стили как источник информации - они оформление.
Еще про асинхронность пример. Как например в VB обработать картинку загрузка которой окажется в будущем? Типа вот так While Image.src = Null ' do nothing End While ну вот, прога ничего не будет делать пока нул Как происходит чтение файлов, допустим (ts = TextStream Object) Dim text as String text = ts.ReadAll() ' в это время ничего не происходит, программа занята чтением файла. На десктопе это нормально и ожидаемо, на десктопе запускаются новые thread чтобы программа работала в то время как какой-то тред занят, или вообще завис. Но веб это же сеть. Если на вебе так делать - у вас страница будет загружаться картинка за картинкой, текст за текстом, то есть прогрессивно - один за другим. Если какой-то ресурс не загрузится - вся очередь встанет намертво. В то время как технология TCP IP позволяет передавать сразу десяток картинок и кучу текста. Конечно, сервер он как бы десктопное приложение. Вы запросили ресурс - он по схеме открывает с десяток тредов и каждый щарашит свою часть, асинхронно то есть, как попало. Браузер все в кучу собирает по событиям загрузки кусков. |
Часовой пояс GMT +3, время: 23:46. |