Свойство 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, время: 22:03. |