Свойство width картинки равно 0px

[Boolean_Type]

Привет всем!
Возникла проблема с самописной галереей, в общих чертах обрисую её так:

<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>

Также хочу спросить: возможно ли сделать так, чтобы высота отображалась сразу?

[danik.js]

Не пойму, на каком этапе будет видна ширина картинки? Я же вроде уже прописал источник, откуда будет тянуться картинка
То есть картинка по-твоему успевает скачаться с сервера быстрее, чем твой процессор перейдет к выполнению следующей инструкции кода? Ты действительно в это веришь?

Жди события @load на картинке. Но перед этим проверь свойство .complete картинки. Если картинка есть в кэше, то оно равно true, и события @load не будет (по-моему в некоторых браузерах будет, но это неважно)

[kostyanet]

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

Оказалось что без этого пустого объекта код превращается из event-driven, в хзч.

Так что грузите в пустой объект, и работайте с load, на все .complete совершенно кладите. От так-то.

[kostyanet]

/* пустой объект, событие load которого сработает всегда, в любом даже самом хитрожопом браузере типа Хрома */
var img=new Image();
/* запрограммировать событие загрузки надо до впаривания src */
img.onload=function(){
/* внутри кложи this - это оно само, загруженная картинка */
im.src=this.src; /* теперь можно профыкать в src элемента */
/* у этого объекта нет еще стилей,
но зато есть нормальные height, width */
alert(this.width); // тут все понятно
};
/* с этого момента браузер кОчает картинку в пустой объект */
im.src='адрес_картинки';


В принципе из этого объекта можно сделать элемент. Если вы пользуетесь стилями канонично, то можно просто заменять тот элемент - на этот элемент, а не переписывать src.

[рони]

на всякий случай
img.src='адрес_картинки';

[kostyanet]

Ну да, а то получится те же яйца вид снизу.

[Boolean_Type]

/* пустой объект, событие load которого сработает всегда, в любом даже самом хитрожопом браузере типа Хрома */
var img=new Image();
/* запрограммировать событие загрузки надо до впаривания src */
img.onload=function(){
/* внутри кложи this - это оно само, загруженная картинка */
im.src=this.src; /* теперь можно профыкать в src элемента */
/* у этого объекта нет еще стилей,
но зато есть нормальные height, width */
alert(this.width); // тут все понятно
};
/* с этого момента браузер кОчает картинку в пустой объект */
im.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. Какого рожна?)

[kostyanet]

и почему запрограммировать событие загрузки надо до впаривания src.

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

[kostyanet]

Не пойму, в чём тут колдунство:

На таких скриптах как VB вы просто будете ждать когда загрузится, в это время ничего работать не будет, все встанет колом. JS устроен иначе. Загрузка выполняется браузером, а скрипт в это время уже убежал далеко-далеко, или вообще скончался. А если он скончался к тому времени когда картинка загрузилась - как ее принять на баланс, провести учет пикселов, положить на полку? Вот - в специальную проперть объекта пишется _свой_ скрипт, кусочек кода который и выполнится по _факту_ отгрузки картинки, причем выполнится в том контексте, в котором был создан. То есть все доступные ему переменные будут доступны.

Как мог популярно изложил принцип callback'ов. Что такое callback вообще, в миру? Это обратный звонок. Вы звоните в контору, выбираете в голосовом меню сделать callback, ваш номер запоминается. Сотрудник в будущем откроет список и наберет вам. Еще колбэки юзали в модемную эпоху когда связь в направлении клиент-сервер оказывалась хуже чем в направлении сервер-клиент из-за коллизий на АТС.

[kostyanet]

Что касается стилей - в новом объекте их нет, а после смены src наверно слетают. Не надо думать про стили как источник информации - они оформление.

Еще про асинхронность пример. Как например в VB обработать картинку загрузка которой окажется в будущем? Типа вот так

While Image.src = Null
' do nothing
End While

ну вот, прога ничего не будет делать пока нул

Как происходит чтение файлов, допустим (ts = TextStream Object)

Dim text as String

text = ts.ReadAll() ' в это время ничего не происходит, программа занята чтением файла.

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

Но веб это же сеть. Если на вебе так делать - у вас страница будет загружаться картинка за картинкой, текст за текстом, то есть прогрессивно - один за другим. Если какой-то ресурс не загрузится - вся очередь встанет намертво. В то время как технология TCP IP позволяет передавать сразу десяток картинок и кучу текста.

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

[kostyanet]

Кстати, чтобы не создавать новый объект можно приписывать к урлу (в срц) какую-нить шнягу типа ?v=случайное число, или текущее время. Тогда все картинки будут качаться с сервера. А зачем если можно сделать пустой объект.

В случае когда функция колбэка навороченная, ее пишут отдельно и втыкают только идентификатор

img.onload = complex_function_for_on_load_image;

ЗЫ С чтением файлов идентично:

reader = new FileReader();
reader.onload=(function(file) {
return function(e){
// ..

reader.readAsDataURL(f);

Скрипт засунул свой кусок в свойство объекта и скончался. Когда файл укачается браузер вызовет этот кусок и файл будет обработан.