Визуализация загрузки изображения
 

Всем привет!

Работаю над сайтом. Любительским. Написал простенькую фотогаллерею на js и css http://lestnicca.ru/kvartirnik3

При нажатии на любое фото всплывает его увеличенная копия. И уже в этом всплывающем окне есть появляющиеся при наведении на определенный сектор элементы навигации. Щелкаешь и функция меняет url картинки вот таким образом (в упрощенном виде):

function plus() {
document.photo.src="Адрес нового изображения";}

Но, пока браузер не загрузит новое изображение, старое он не убирает. У пользователя возникает непонимание. Я щелкаю, а ничего не происходит. А если инет медленный, то ждать надо несколько секунд. Именно для этого встала задача при клике по элементам навигации показывать пользователю заранее загруженную гифку-прелоадер. Но все оказалось не так просто.

Сейчас такая гифка отображается, но мне не нравится та реализация, которую я нашел. Вот код:

function plus() { 
document.photo.src="адрес анимации загрузки";
setTimeout('document.photo.src="адрес нового изображения",1); }

То есть предварительно загружаем гифку. Потом при щелчке меняем наше изображение на гиф на 1 милисекунду. Через 1мс меняем адрес на адрес нужного изображения. Если оно еще не загрузилось, то гифка так и останется висеть до его полной загрузки.

Решение вроде бы как решение, но у меня возникло с ним 2 проблемы.

1. Проблема позиционирования гиф. Ширина поля не фиксированная и зависит от размера фото. Так надо. Но гифка маленькая и при отображении ее поле сворачивается. Ну, эту проблему, теоретически можно решить если заморочиться и задать функции кроме адреса изображения менять на 1мс еще и свойства css. Отцентровать как-нибудь. Наверное это можно.

2. Даже если фото загружено, гифка все равно вылезает. На доли секунды, но ее видно. Задержка в 1мс на практике не выполняется. И тут уже ничего не поделаешь.

А теперь внимание, уважаемые знатоки - вопрос и суть задачи.

Идеальный вариант - это заранее загрузить гифку и задать ей display:none, позиционировать ее с помощью absolute в процентах. Она будет стоять по центру ну или в другом месте, там где я захочу. Прямо поверх предыдущей картинки. Это решит первую проблему. Но как менять свойство display, ТОЛЬКО если картинка еще не загружена и отключать его когда она загрузилась? Пробовал через событие onload как самый очевидный вариант, а не тут-то было. У кого есть какие решения? Поделитесь плиз.

Для предварительной загрузки изображений:

jQuery.preloadImages = function() 
{
 for(var i = 0; i<arguments.length; i++) 
 {
  jQuery("<img>").attr("src", arguments[i]);
 }
};

далее вызываем нашу функцию и в качестве параметров передаем ей путь
до вашей гифки.

т.е.

$.preloadImages("image1.gif"", "path/image3.jpg");

Никогда не имел дело с jQuery и с трудом представляю как это работает. Это мне нужно библиотеки подключать или как? Я не шарю, простите за нубство :help:

здесь скачайте последнюю версию библиотеки:
http://jquery.com/download/
далее в header подключите ее:

<script type="text/javascript" src="путь/библиотека.js"></script>

там же определите функцию

<script type="text/javascript" >
         тут
         </script>

далее либо в хедере либо в конце разметки, перед </body> вставьте

$.preloadImages("image1.gif"", "path/image3.jpg");

незабываем обрамлять js-код тегами

<script type="text/javascript" >
  </script>

Вставил в хэддер. Ничего не изменилось. Что я делаю неправильно? Если можно, гляньте код? http://lestnicca.ru/kvartirnik3

забыли указать атрибут type="text/javascript" , где вызываете ф-ю