Вверх

Блог
RSS лента

Прелоадер страницы на jquery

Vape Shop Эко Заправка

Считаю использование прелоадера для не флешевых сайтов бесполезным, человек должен видеть то что загружается, если даже сайт большой, но я зашел посмотреть например контакты, смысл мне ждать пару минут пока загрузятся, все баннера, текст и картинки, но иногда заказчики хотят такую технологию.
Велосипед я не изобретал, это решение предложил Гайя Кесслер на своем блоге http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
Пример можете посмотреть вот здесь ТЫЦ
Довольно любопытное кстати решение. Его вполне можно переделать под свои нужны, дизайн и тд.
Сами скрипты скачать можно здесь ТЫЦ

Подключение простенькое:

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

И в самом низу перед закрывающимся </body> вызов

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

Для настройки анимации можно посмотреть код QueryLoader.animateLoader () и QueryLoader.doneLoad ()

Ваша оценка: Пусто Средняя: 4.3 (82 голосов)

Комментарии

как прикрутить preloader на сайт

Наконец то... Ну прямо таки все руку сбил.. А этот ПОШЕЛ... Спас-ибо...

Подвисание

Отличный прелоадер, только если ставлю перед закрытием боди, идет подвисание при загрузке, секунд на 5-7, и только потом идут проценты и тд, а если ставлю сразу после открытия боди, все быстро грузится. Без него самого, очень быстро а с ним подвисает, но поскольку понравился сам эффект, убрал % и оставил только прогресс бар и шторки, получилась красивая загрузка сайта.

Проблема в шаблоне Artisteer

Как оказалось, эффект зависания на 0% встречается при использовании шаблона, сгенерированного в Artisteer. В стандартном beez2 всё работает. Вопрос только, чем этому скрипту не понравился мой Артистировский шаблон???

Скорей всего в этом шаблоне

Скорей всего в этом шаблоне используются какие то джейквери библиотеки или джава скрипты которые конфликтуют с прелоадером. Или шаблон использует стандартный мутулз, который конфликтует с джейкверы. Попробуйте отключить мутулз, или устранить конфликт, как это сделать описано у меня на блоге.

прелоадер

Тварищи,объяснить подробно,как сие чудо засандалить в джумлу )))

А я разве не объяснил как его

А я разве не объяснил как его прикручивать к сайту?
К джумле таким же макаром прикручивается. Всё что я написал в статье делается в индекс файле вашего шаблона, и будет вам счастье!

Под версии JQuery

5

В строке 64 queryLoader.js в случае если выдает ошибку $(this).attr("tagName") is undefined то меняем attr на prop

ВОт я не поняла: а куда

ВОт я не поняла: а куда девать первую часть кода?

И еще: если у меня движок joomla, файлики класть по пути:

/templates/шаблон/CSS

/templates/шаблон/js

?

>прошу помочь

Если вы имеете введу куда

Если вы имеете введу куда вставить:

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

То по стандарту такое вот пишут между <head>....</head>

Насчет файлов то лучше всего сохранять их в папку шаблона, но нужно еще прописать потом путь к этим файлам
Например путь к папке с ЦСС файлом <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/queryLoader.css" type="text/css" />

Прописывается всё в шаблоне в index.php, только именно в файле шаблона, а то положите свою джумлу.

Понятно, а к файлу js как

Понятно, а к файлу js как тогда? в 3 строчке:

    <script type='text/javascript' src='js/queryLoader.js'></script>

Так же как и к цсс. <link

Так же как и к цсс.

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/js/queryLoader.js" type="text/css" />

Вот это строчка "<?php echo $tmpTools->templateurl(); ?>" означает путь к папке шаблонов и к шаблону который сейчас используется.

Странно( после вставления

Странно( после вставления этого кода, грузится пустая страница

файлы лежат там, где надо; 1 часть кода в <head>; конец скрипта перед </body>... что же может быть не так?

делается всё в файле index.php в папке с шаблоном

Пустая страница не может

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

Если прописываю полный путь к

Если прописываю полный путь к файлам, то просто грузится сайт, без прлоадера

Кстати еще может быть

Кстати еще может быть проблема конфликта джейвери библиотеки и мутул. По умолчании мутулс можно отрубить, или прописать для джейквери строчку что бы не конфликтовало не кто не с кем.
У меня в блоге где то была статейка по этому поводу

Знатный прелоадер! Я бы с

4

Знатный прелоадер! Я бы с удовольствием его ипользовал, но...
Мне не нравится чередование серого - черного тонов. А самому исправить - не получается.

Цвета меняются в файле стилей

Цвета меняются в файле стилей css

Цитирую: "...человек должен

Цитирую:

"...человек должен видеть то что загружается, если даже сайт большой но я зашел посмотреть например контакты, смысл мне ждать пару минут пока загрузятся, все баннера, текст и картинки..."

Если вы хотите посмотреть контакты, значит, вы наверняка уже заходили на этот сайт, и все ваши похождения сохранились, вы же не чистите куки при каждом заходе в интернет? Значит сайт загрузится моментально.

А вот это как раз не факт. У

А вот это как раз не факт. У меня наоборот меньший процент сайтов куда я захожу смотреть контакты, больше как то всё новые сайты. Те же интернет магазины.
Кстати вам не когда не попадались сайты "кишки", то есть сайт на одной странице но разбитый якорями, так вот они обычно ой как долго грузятся. При повторном входе конечно уже побыстрее :)
Да и если честно то не особо я люблю прелоадеры хоть и приходится использовать их.

Прелоадер замечательный и CSS

Прелоадер замечательный и CSS для настройки порадовал, но вот я поставил его на Joomla 1.6, назначил шаблон для одного пункта меню. Для этого пункта грузит все замечательно, а для отдельных материалов из категории этого пункта зависает на 93%. Странно... Буду пилить...

Такая штука бывает если не

Такая штука бывает если не загружается какая то картинка. то есть она прописана но например её нет на сервере. У меня по крайней мере такой баг был, но правда на 96%
Прелоадер еще не совершенен :(

Это просто СУПЕР!!!!!!!! как

Это просто СУПЕР!!!!!!!! как раз то что искал!!! Хотел делать на флеше, но мануалов внятных для своего уровня знаний не нашёл!!!!

давно именно такой

давно именно такой искал.
можно по подробнее как его установить.

Куда уже подробней, я же

Куда уже подробней, я же написал что нужно делать

Прелоадер страницы на jquery

Спасибо за Ваш пост о прелоадере, который изобрел Гайя Кесслер. Это именно то что я искал для своего сайта на Joomla. Дело в том, что из за обилия графики мой сайт долго грузится, и что бы, как то, занять посетителя, нужен был этот самый прелоадер. Несколько часов и куча англоязычных блогов и форумов позади(где обсуждались, в основном,прелоадеры для флэш сайтов), я и не надеялся встретить такой хороший продукт в русскоязычном представлении. Большое спасибо!

Ну собственно у меня стояла

Ну собственно у меня стояла такая же задача. Для флеш сайтов то я знал как делать, а вот для обычных сайтов не знал.
Этот прелоадер тоже далек от идеала но все же рабочий.
Пользуйтесь на здоровье.

Вопрос

Хороший прелоадер. Установил на Джумлу. Но вот вопрос: как сделать, что бы прелоадер включался только раз при загрузке сайта. Просто надоедает, когда каждый переход по сайту наблюдаешь прелоадер.

Для этого сам скрипт:  

Для этого сам скрипт:

  1.  
  2. <script type='text/javascript'>
  3.  QueryLoader.init();
  4. </script>

помести в модуль, типа "Special HTML", и назнач вывод модуля только на главную страницу. Да и еще модуль желательно использовать самый нижний в структуре шаблона ;)
Лично я сделал так и теперь прелоадер только на главную ))

Какая то не правильная идея.

Какая то не правильная идея. Это же прелоадер, а сайт у вас же не на аяксе, значит страницы сайта перезагружаются, и значит что то каждый раз грузиться, вот и прелоадер делает свое дело. Собственно если бы и на аяксе был бы то должны быть прелоадеры.

Спасибо

Благодарю автора. Очень полезный пост.

Странно, зависает на 0%

Сделал для Joomla всё, как было сказано, файлы бросил в /templates/template_name/ql2, соответственно в первом скрипте поменял адреса на абсолютные, второй скрипт вставил непосредственно перед - в результате загружается чёрный экран с полупрозрачной надписью 0% - на этом всё. Помогите!

Тяжело сказать что вы не так

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

У меня то же самое

Да, я так же прописала абсолютные адреса. Теперь при загрузке на секунду появляется мой сайт, а потом загружается чёрный экран с 0% и зависает((

Попробуйте отключить мутулс,

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

Не работает с шаблоном Artisteer

Странно: скрипт нормально себя ведёт на обычном шаблоне joomla (например, beez2), но при попытке встроить его в шаблон, собранный в Artisteer - зависает на нуле. Подскажите, где искать причины этой мутации?

Я уже выше писал что нужно

Я уже выше писал что нужно проверить. Скорей всего у вас конфликт скриптов, посмотрите нет ли джаваскиптовских ошибок. Вероятней всего конфликт между мутулс и джейквери. Если не критично то отключите мутулс, на блоге у меня описано как это сделать.

Главная | Портфолио | Услуги | Контакты | Блог