Как создать анимацию предзагрузки сайта?

[Hanigun]

Доброго времени суток форумчане!
Давно хотел понять как создать анимацию предзагрузки сайта.

Яркий пример тому является игра World of Tanks!
В игре и на самом сайте, пока грузится страница, на экране присутствует анимированная шестеренка которая крутится, исчезает только тогда когда страница загрузилась.
Подскажите как такое реализовать при помощи редактора WYSIWYG

Анимированную картинку я уж сам создам.

[anonimus]

нУЖНО делать не предзагрузку сайта, а сайт оптимизировать так, что бы он быстро грузился

[Hanigun]

это само собой, однако хотелось бы и такой элемент изучить! Всеравно как сайт не оптимизируй, грузиться он будет как минимум пару секунд

[anonimus]

правильно
вы ещё увеличьте )))

[Hanigun]

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

[anonimus]

ну тогда держите:

вставляете код на страницы сайта между тегами head

Код: Выделить всё

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>

в конце страницы этот код:

Код: Выделить всё

<script type='text/javascript'>
QueryLoader.init();
</script>

вот и всё

сами скрипты и стили загрузить на сайт в соответствующие папки

files.zip

[MasterOfPuppets]

вроде все сделал как Вы сказали, но никаких изменений не произошло, только две карусели которые были на всю ширину экрана сузились


скрипты и стили, которые в паке files, нужно ведь в корневую папку на сервер выгружать, я правильно понял?

[anonimus]

вроде все сделал как Вы сказали, но никаких изменений не произошло, только две карусели которые были на всю ширину экрана сузились


скрипты и стили, которые в паке files, нужно ведь в корневую папку на сервер выгружать, я правильно понял?

ВЫ ПУТИ К СКРИПТАМ ТО СМОТРТЕ
там указанно css и js соответственно
если хотите в корень, то нужно в путях поменять

[MasterOfPuppets]

я дико извиняюсь, но где посмотреть пути к скриптам?

[anonimus]

я дико извиняюсь, но где посмотреть пути к скриптам?

так под спойлером же

css/queryLoader.css
js/queryLoader.js

[MasterOfPuppets]

Анатолий, я Вам уже должен как земля колхозу. Все получилось, спасибо, но только карусели сузились, а должны быть на всю ширину экрана. Скрипт убираешь - становится все нормально. В чем может быть причина?

[anonimus]

покажите ссылку

[MasterOfPuppets]

только не сильно смейтесь :) я только начинающий сайтостроитель..
www.delosait.ru

[Gudwinn]

только не сильно смейтесь :) я только начинающий сайтостроитель..
http://www.delosait.ru

вот эту строку <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> уберите, у Вас конфликт скриптов. Так как у вас есть на страницах карусели, библиотека джейквери не должна дублироваться.

[MasterOfPuppets]

Спасибо, но я это уже пробовал. Итог - черная страница (