forum.boolean.name - Первый вопрос, загрузка картинки

forum.boolean.name (http://forum.boolean.name/index.php)

- JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)

- - Первый вопрос, загрузка картинки (http://forum.boolean.name/showthread.php?t=11860)

Первый вопрос, загрузка картинки

Приветствую!

На первых парах изучения есть у меня вопрос:

Проблематика:

Загрузка картинки

Решение:

Код:

img=document.createElement("IMG");

img.src="путь_к_файлу";

document.body.appendChild(img);

Критика:

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

Вопрос:

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

Идеи:

Определять картинку невидимой на экране и делать у нее метод onload который будет убирать сообщение о загрузке и показывать саму картинку...

пока еще не пробовал, ибо нет у меня хороший сильно... не протестишь толком...

есть у кого какие идеи? как это нормально делается?

ЗЫ: только плиз не надо говорить юзай jquery там все есть...

:)

Ответ: Первый вопрос, загрузка картинки

Для реализации показа/скрытия картинки. Тут не так и просто.
Во первых, ты не можешь просто так извлечь картинку из документа и продолжить загрузку. Можно её скрыть, но размер например ячейки в таблице, останется прежним. (только щас идея пришла - размер менять картинки, а как загрузиться, увеличивать обратно до нормальных размеров, нада попробовать будет).
Поэтому тебе нада 2 картинки, и в CSS стили, прописать позицию, и наложение на друг дружку. Между 2 картинками.
Далее, первая - это загружаемая, вторая это анимация загрузки (предположим).
Делаешь так:
При каком либо эвенте, нужно указать src для картинки, и убедиться что изначально картинка спрятана, и запустить функцию которая будет запускать себя сама по таймеру, определённой длительности период, проверяя, не скачалась ли картинка. Для таймеров нада window.setTimeout, для проверки скачалась ли картинка: эллемент(картинка).complete - возвращает true/false, если броузер закачал картинку.
Элементы находятся по ID: getElementById

ЗЫ, image.complete - не всеми броузерами держится, и не везде правильно работает. Можно ещё у самого <img> элемента, добавить onload атрибут.

Ответ: Первый вопрос, загрузка картинки

Цитата:

но размер например ячейки в таблице, останется прежним.

а неча таблицами верстать

Цитата:

ЗЫ: только плиз не надо говорить юзай jquery там все есть...

хочешь геморроя? ну, флаг в руки тогда...