Анимация загрузки картинок

[danie]

http://svyatoslavdesign.com.ua/works/cottege/1/

Пытаюсь сделать так, чтобы при клике на миниатюру внизу, во время смены сорса основной картинки последняя была скрыта, а поверх нее показывался див с анимацией загрузки (гиф).

Код онклика миниатюры:

onclick="imgOn('large/1.jpg','s5')"

Код смены основной картинки + анимация

function imgOn(imgSrc,imgId) {
document.getElementById('central_photo').style.visibility = "hidden";  //  скрываю основную картинку
document.getElementById('load').style.visibility = "visible";	//	показываю скрытый див с гиф анимацией 
img = new Image();
img.src = imgSrc; // делаю предгазрузку картинки в Image
document.getElementById('central_photo').src = img.src;	//	заменяю сорс основной картинки
document.getElementById('central_photo').style.visibility = "visible";  //  показываю основную картинку	 
document.getElementById('central_photo').title = document.getElementById(imgId).title;	 
document.getElementById('load').style.visibility = "hidden";	//	скрываю див анимации
}

Результат не такой как ожидалось - анимация не появляется, картинки загружаются "на глазах", а не скрыто.

Возможно решение для этого вообще иное? подскажите! Спасибо

Edited February 23, 2011 by danie

[Int]

Бр, какой некрасивый код. Style в body, устаревшие <center> и <font>, ширина через width=, bgcolor рядом со style, да ещё часть свойств в двойных кавычках, а часть в одинарных.

Разные люди писали?

По сути: а выполнение скрипта точно останавливается при вызове img.src= ? Потому что если загрузка происходит параллельно с выполнением, то картинки быстро меняются, а потом так же быстро меняются назад. Стоит это проверить, закомментировав последние три строки.

[danie]

Бр, какой некрасивый код. Style в body, устаревшие <center> и <font>, ширина через width=, bgcolor рядом со style, да ещё часть свойств в двойных кавычках, а часть в одинарных.

Разные люди писали?

По сути: а выполнение скрипта точно останавливается при вызове img.src= ? Потому что если загрузка происходит параллельно с выполнением, то картинки быстро меняются, а потом так же быстро меняются назад. Стоит это проверить, закомментировав последние три строки.

Спасибо за критику. Это всего лишь третий мой сайт, я учусь)

Когда закомментированы строчки показа основной картинки и скрытия дива, остается просто див з анимацией загрузки.

Как толково скрыть время загрузки изображения дивом с анимацией? В FF анимации не заметно, просто через 3 сек одна картинка сразу сменяется другой, а в IE это происходит на глазах - картинка 3 сек "наползает".

Есть в js что-то типа document.ready или в этом роде, чтобы показать картинку когда загрузка данных завершена?

Edited February 23, 2011 by danie

[Searcher]

есть событие onload...

[Int]

img.onload=function()
{
document.getElementById('central_photo').src=img.src;
document.getElementById('central_photo').style.visibility = "visible";
document.getElementById('central_photo').title = document.getElementById(imgId).title;	
document.getElementById('load').style.visibility = "hidden";
}

Может как-то вот так его применить.

Скорее всего так и есть, весь код пролетает до конца, происходит две смены туда-сюда, а загрузка тем временем ещё идёт.

[danie]

	function imgOn(imgSrc,imgId) {
		document.getElementById('central_photo').style.visibility = "hidden";  //  скрываю основную картинку
		document.getElementById('load').style.visibility = "visible";	//	показываю скрытый див с гиф анимацией
		img = new Image();
		img.src = imgSrc; // делаю предгазрузку картинки в Image
		img.onload=function()
		{
		document.getElementById('central_photo').src = img.src;
		document.getElementById('central_photo').style.visibility = "visible";
		document.getElementById('central_photo').title = document.getElementById(imgId).title;	
		document.getElementById('load').style.visibility = "hidden";
		}	
		}

В файрфоксе отрабатывает вроде корректно, но в ЫЕ - через раз. Некоторые картинки так и не показываются, зависает анимация загрузки и все.

document.getElementById('central_photo').src = img.src; пробовал вынести перед img.onload=function() - результат практически тот же.

Edited February 24, 2011 by danie

[Int]

Ну значит в IE не всегда срабатывает onload

Надо же, два дня как учу яваскрипт и уже получилось обработчик события правильно сделать

[danie]

Ну значит в IE не всегда срабатывает onload

Надо же, два дня как учу яваскрипт и уже получилось обработчик события правильно сделать

Молодец!

Кто знает, какое событие для експлорера применить? чтобы этот ослик не тормозил(

[rus]

Кто знает, какое событие для експлорера применить? чтобы этот ослик не тормозил(

вот тут почитай.

[danie]

Испытатели говорят, что у них в ИЕ глюков не наблюдается, пока оставлю как есть. Int - жму руку! Спасибо

Edited February 24, 2011 by danie

[danie]

Перестало работать в ИЕ абсолютно, хоть ничего не трогал ((

[danie]

вот тут почитай.

Но в статье написано, что onload относится к событиям, к-рые поддерживаются всемя браузерами - ИЕ в том числе.

Тем более, событие работает! Но через раз