Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Асинхронная загрузка изображения (https://javascript.ru/forum/jquery/2041-asinkhronnaya-zagruzka-izobrazheniya.html)

dummer 24.10.2008 22:05

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

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

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

Kolyaj 25.10.2008 14:10

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

dummer 25.10.2008 15:30

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

Kolyaj 25.10.2008 16:51

dummer,
Цитата:

Сообщение от dummer
простой сменой атрибута src у большой картинки


Octane 25.10.2008 17:29

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

dummer 25.10.2008 18:03

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

Андрей Параничев 25.10.2008 18:12

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

dummer 25.10.2008 18:29

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

Octane 25.10.2008 18:36

В «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);
};

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

Kolyaj 25.10.2008 20:16

Цитата:

Сообщение от Octane
В «Opera» не работает «onload» для <img>

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


Часовой пояс GMT +3, время: 00:06.