Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2008, 22:05
Интересующийся
Отправить личное сообщение для dummer Посмотреть профиль Найти все сообщения от dummer
 
Регистрация: 24.10.2008
Сообщений: 21

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

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

На странице есть одна большая картинка ,
а под ней несколько маленьких(они содержат ссылки на большие картинки).
Мне необходимо , чтобы при клике на маленькие картинки происходила смена большой картинки на другую , без перезагрузки страницы.
Этого можно добиться простой сменой атрибута src у большой картинки,
но мне надо, чтобы все было красиво т.е. при нажатии на маленькую картинку появлялась надпись "Загрузка" , а после того как картинка загрузиться в асинхронном режиме эта надпись исчезала и появлялась картинка.
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2008, 14:10
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

dummer,
большую картинку кладете в див, у которого фоном анимированный лоадер. Далее, при событии onload у большой картинки делаете ее видимой, а перед сменой src скрываете ее. Тогда во время загрузки будет виден анимированный фон.
Ответить с цитированием
  #3 (permalink)  
Старый 25.10.2008, 15:30
Интересующийся
Отправить личное сообщение для dummer Посмотреть профиль Найти все сообщения от dummer
 
Регистрация: 24.10.2008
Сообщений: 21

Как имено произвести загрузку картинки с помощью onload?
Ответить с цитированием
  #4 (permalink)  
Старый 25.10.2008, 16:51
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

dummer,
Сообщение от dummer
простой сменой атрибута src у большой картинки
Ответить с цитированием
  #5 (permalink)  
Старый 25.10.2008, 17:29
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Да нет, он спрашивает как узнать, что картинка загрузилась? Мне тоже интересно, не получается кроссбраузерно сделать проверяя image.complete что-то.
Ответить с цитированием
  #6 (permalink)  
Старый 25.10.2008, 18:03
Интересующийся
Отправить личное сообщение для dummer Посмотреть профиль Найти все сообщения от dummer
 
Регистрация: 24.10.2008
Сообщений: 21

Octane, Вы попали в точку !!!
Ответить с цитированием
  #7 (permalink)  
Старый 25.10.2008, 18:12
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Когда картинка загружается вызывается обработчик onload объекта Image (или HTMLElement). Разве нет?
Ответить с цитированием
  #8 (permalink)  
Старый 25.10.2008, 18:29
Интересующийся
Отправить личное сообщение для dummer Посмотреть профиль Найти все сообщения от dummer
 
Регистрация: 24.10.2008
Сообщений: 21

Андрей Параничев, Вы можете привести рабочий вариант?
Ответить с цитированием
  #9 (permalink)  
Старый 25.10.2008, 18:36
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

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

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

Последний раз редактировалось Octane, 25.10.2008 в 18:42.
Ответить с цитированием
  #10 (permalink)  
Старый 25.10.2008, 20:16
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Octane
В «Opera» не работает «onload» для <img>
Да, честно говоря, все работает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, что бы изображения пропадали. Dronch Элементы интерфейса 7 28.08.2008 21:55
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28
Асинхронная загрузка картинок. Leonid AJAX и COMET 9 13.05.2008 09:33
Пользовательские изображения CyberSorrow Элементы интерфейса 2 23.03.2008 01:14
Визуальное выделение части изображения Гость Общие вопросы Javascript 0 25.02.2008 19:44