Асинхронная загрузка изображения
 

Доброго времени суток!
У меня возникла проблема с реализацией одной задумки

http://www.free-lancer.uz/my/portfolio_inner.html

На странице есть одна большая картинка ,
а под ней несколько маленьких(они содержат ссылки на большие картинки).
Мне необходимо , чтобы при клике на маленькие картинки происходила смена большой картинки на другую , без перезагрузки страницы.
Этого можно добиться простой сменой атрибута src у большой картинки,
но мне надо, чтобы все было красиво т.е. при нажатии на маленькую картинку появлялась надпись "Загрузка" , а после того как картинка загрузиться в асинхронном режиме эта надпись исчезала и появлялась картинка.

dummer,
большую картинку кладете в див, у которого фоном анимированный лоадер. Далее, при событии onload у большой картинки делаете ее видимой, а перед сменой src скрываете ее. Тогда во время загрузки будет виден анимированный фон.

Как имено произвести загрузку картинки с помощью onload?

dummer,

Да нет, он спрашивает как узнать, что картинка загрузилась? Мне тоже интересно, не получается кроссбраузерно сделать проверяя image.complete что-то.

Octane, Вы попали в точку !!!

Когда картинка загружается вызывается обработчик onload объекта Image (или HTMLElement). Разве нет?

Андрей Параничев, Вы можете привести рабочий вариант?

В «Opera» не работает «onload» для <img>, хотя щас попробую добавлять в дерево абсолютно позиционированное изображение с «visibility: hidden;».
-------------------------------------
Добавлено:

Если в дерево добалять, то срабатывает только первый раз, когда картинки еще нет в кэше

window.onload = function() {
	var img = new Image();
	img.src = 'image.gif';
	img.onload = function() {
		alert('loaded');
	};
	document.body.appendChild(img);
};

Конечно можно случайное число в запросе отправить, чтобы предотвратить кэширование, но все же это не выход. Подумаю как можно это реализовать…

Да, честно говоря, все работает.