QueryLoader — предзагрузка страницы на jQuery
Это вольный перевод статьи с Gaya Design.
В интернете полно вопросов о том, как сделать preload, который скрывал бы страницу или информировал пользователя о загрузки до тех пор, пока не будет полностью загружена страница со всеми изображениями, в том числе и картинок в CSS стилях. Да даже просто сделать preload изображений.
На просторах всё того же, единственного и неповторимого, интернета 🙂 есть множество решений, но все они отображают вращающеюся анимированную картинку (индикатор загрузки) или просто текст «Идёт загрузка» (Loading / Loading page).
Но ведь мы можем сделать более красивый блок загрузки?!
В QueryLoader есть loading bar и анимация, которые отображают ход загрузки и только после полной загрузки страницы отображают контент.
Что б было наглядно понятно — привожу пример. Или можно скачать исходный код.
Так же есть немного измененная версия (спасибо Olivier Dumetz), которая показывает проценты загрузки. Так же можно сразу скачать исходный код.
Особенности скрипта
- Блок предварительной загрузки на страницы
- Работает до полной загрузки всех картинок, в том числе и из CSS стилей
- Простота установки
- Настраиваемый laoding бар
- Работоспособно в Firefox, Safari, Opera, Chrome, IE7, IE8. В IE6 скрипт отключается.
Установка
Для установки скрипта Вам не обязательно знать JavaScript. Просто следуйте инструкции.
- Скачайте архив со скриптом
- Загрузите содержимое на Ваш веб-сервер
- Подключаем jQuery в коде вашей страницы (обычно подключается перед закрывающим тегом </head>).
Если у Вас на сайте уже подключен jQuery, то пропустите этот пункт.<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>
Всё, скрипт должен работать!
Настройки
Если Вы хотите, чтобы скрипт работал только на определенных блоках или элементах, то Вы можете настроить jQuery только на необходимые Вам элементы.
Допустим, у Вас есть элемент с идентификатором (id=»idOfTheElement») и Вы хотите, чтобы изображения внутри этого элемента скрывались за preload баром.
Для этого Вы можете использовать следующий код
<script type='text/javascript'>
QueryLoader.selectorPreload = "#idOfTheElement";
QueryLoader.init();
</script>
Имейте в виду, что вы можете использовать бар загрузки только для одного элемента. И если Вы захотите использовать селектор класса (class selector — поиск объекта не по id, а по class), то могут возникнуть проблемы.
Чтобы узнать больше о селекторах в JQuery вы можете прочитать страницу документации по JQuery.
Для настройки анимации в баре, вы можете посмотреть и изменить под себя функции: QueryLoader.animateLoader() и QueryLoader.doneLoad()
Но для изменения этих функций требует немного знаний по JQuery.
Любые вопросы о QueryLoader и реализации могут быть размещены в комментариях ниже или в комментариях на сайте автора.
Удачи и счастливых разработок.
UPDATE 30.08.14, 02.11.14
У кого возникают проблемы в новых версиях браузеров — прочтите комментарии ниже от пользователей W_A_S_A_B_I и Максима Матюхина
При использовании этого скрипта совместно с SpaceGallery загрузка доходит до середины и останавливается, помогите решить проблему, пожалуйста
У меня всё нормально работает: http://demo.g63.ru/gal/index.html
Попробуй использовать другую версию jQuery.
Я для примера подключил с репозитария Google. Проверено — работает с версией 1.3-1.5.
Сейчас поищу ошибку, почему не работает с более новыми библиотеками.
Чтобы работало с новыми версиями jQuery — необходимо найти строчку
и удалить из условия вторую часть
Не получилось найти данную строчку, не мог бы скинуть готовый файл jquery.js?
http://demo.g63.ru/gal/js/queryLoader2.js
К сожалению не помогло((
Скинь ссылку на нерабочее или архив.
http://rghost.ru/36878451
У тебя виснет потому, что одна из картинок отсутствует, так еще и название кириллическими буквами. Но ошибка из-за отсутствия файла Россия.jpg
Не из-за этого. Во-первых, файл Россия.jpg есть на компе, просто в архив его не добавил, а во-вторых, изменил название, но все равно не прет.)))
Ты в опере что ли смотрел? Да, в опере всплывает ошибка.
1) Так же отсутствует spas.jpg
2) И еще, не знаю почему не работает, но не работает из-за ссылок
Удали их
Спасибо большое, проблема на самом деле была в ссылках типа , всё заработало)))
А можно как-то сделать чтобы флеш элементы тоже не отображались до полной загрузки?
Можно, но я бы не рекомендовал, ибо проблем будет много — не установлен флеш (например на мобильных системах), установлен flashblock — в этих случаях пользователи будут видеть черный экран и ни чего не понимать. Так ещё и флеш обычно весит очень много — пользователи устанут ждать. Лучше сделать подобное в самом флеше.
На jQuery 1.7 следующая проблема возникает:
При первом запуске лоадера нет но сайт отображается, при обновлении страницы появляется лоадер (слой лоадера) , который висит и не исчезает.
1) Наверное потому что не успевают подгрузиться скрипты. Скрипт прелоадера и jQ лучше ставить в хедере, а не как рекомендуется — в конце документа.
2) По второму пункту — надо смотреть пациента. И ты пробовал качать архив указанный в комментариях, он пофикшен для новых версий jQ?
А как сделать, чтобы он открывался только на главной странице в джумла? Если через идентификатор (id=”idOfTheElement”), то какой необходимо сделать?
И как сделать, чтобы показывался только при первом посещении, при последующих нет. Как я понимаю через куки, но как это реализовать?
Джумлу не знаю. Скорее всего там должен быть файл отвечающий за главную страницу. Вот там и надо добавить код. Точно не скажу.
Ради первого посещения ставить его не имеет смысла. Ибо скрипт будет грузиться параллельно с графикой после загрузки самой страницы.
Т.е. пользователи сначала увидят страницу без графики, потом этот лоадер, а потом уже полную страницу.
Реализовать можно и через куки. Достаточно подробно подобное расписано в статье
Проблема большинства в том, что при использовании в css параметра:
Скрипт пытается найти изображение и не находит, из-за чего виснет.
Нашел решение!
Нужно в файле queryloader.js найти условие
И поменять на
т.е. мы убираем первую часть условия, т.к. она устарела в связи с появлением новых параметров CSS3.
Далее идет обработка вариантов url’s вот она то и устарела,т.к. в «background-image» уже давно может быть всё что угодно кроме адреса к изображению.
У меня например запарывалось на градиенте.
Спасибо! Добавил в статье ссылку на Ваш комментарий.
Почему проблемы с хромом?
Извиняюсь, поправил! Сам не знаю почему 🙂
Правка W_A_S_A_B_I немного не рациональна.
У меня на сайте очень много графики сделано как раз через «background-image», но при этом в этом свойстве попался и градиент.
В итоге
-без правки виснет
-с правкой толку нет от модуля
Предлогаю Менять на следующий код
Вот сам код
Тут проверю что б свойстве «background-image» был именно адрес картинки
Кроме этого после
Добавил
Это позволяет избежать подвисание если будет ошибка при загрузке
Здаров, ребят. Как мне сместить фон лоадера пикселей на 30 влево? дело в том, что нативной полосы прокрутки у меня нет, а это место отведено под неё, я так понимаю, и лоадер работает, но на экране слева на 30px виден сайт.
Азамат, самое простое, но не идеальное решение — найди вот этот кусок:
И прибавь необходимое число пикселей:
Сделал по инструкции , прелоадер не запускается
Привет ребята!
Пришлось повозиться.. но после часа работы довел до ума этот прелоадер.
Спасибо за решение с зависоном на 98%.. воспользовался =)
Вот как получилось.. если кому интересно
3D World of Dogs & Puppies
http://www.dogica.com
Cпасибо за прелоадер!
Всем привет!
Подскажите, как после раскрытия шторки серый цвет заменить на белый?
Фон моего сайта белый и так выглядело бы гораздо красивее.
Спасибо.
Ярослав, цвет меняется в файле queryLoader.css
Или можно прописать данные стили в своих основных стилях.
Большое спасибо, нашел.
Еще такой вопрос: на верхнюю часть шторки хочу вставить логотип, а на нижнюю — слоган. Как это сделать (желательно с минимальным использованием JS).
Заранее благодарен за ваши ответы.
Подобное можно реализовать на CSS с помощью псевдоэлементов :after и :before.
Прикреплять их надо к классу QOverlay (или может QLoader).
Понял, получилось 🙂
Еще вопрос: на мобильных анимация на протяжении всего ее действия отображается в левом верхнем углу экрана (не во всю ширину и высоту). Добавление свойств height i width по 100% не помогло.
Есть идеи, как это исправляется?
Спасибо.
Попробовать добавить min/max-height/width
Здравствуйте подскажите пожалуйста сделал все как написано но когда заходишь на сайт сначала мелькает главная страница а потом появляется анимация!Как сделать чтоб сразу анимация была??
сайт http://boutique-shop.zz.mu/
Это происходит потому что скрипты не успевают загрузится. А грузятся они после загрузки HTML.
Это происходит только при первой загрузке.
Если это происходит постоянно, то ваши скрипты не кешируются у пользователя. Необходимо настроить сервер, чтобы скрипты начали кешироваться.
Так же есть очень плохой способ.
Для BODY поставить стиль DISPLAY:NONE, скрыв всё.
А перед инициализацией QueryLoader.init();
Прописать смену видимости BODY
document.body.style.display = «block»;
Но этот способ плох тем, что у кого отключены скрипты — тот вашу страницу вообще не увидит. Хотя в интернете в наше время это недоразумение популярно.
Кстати когда я просто сделал все по описанию было нормально, но когда я прописал
http://prntscr.com/7rf2a4
чтоб грузился скрипт только на главной, начало мелькать(((Может я не правильно что то прописал т.к. я самоучка и многих нюансов не понимаю
Можно поподробнее как настроить сервер, использую хостинг от hostinger.com.ua
Читаем внимательнее статью
Кеширование
На локалке работает. На хостинге висит!
Извиняюсь, что не ответил ранее, уведомления почему-то не приходили.
Если проблема ещё актуальна, то предоставь ссылку, где весит, попробую подсказать причину проблемы.
Спасибо большое. С грехом пополам я все-таки смог установить.
Как вместо линии, поставить свою анимашку?
Родион, за саму анимацию отвечает функция animateLoader, а создаётся анимация, вроде, в spawnLoader
Ни у кого нет примера, где хотяб над линией была анимация .gif?
На строке
Далее ему назначается класс QOverlay
Самое простое: по этому классу прописать через стили необходимую картинку фоном или через псевдоэлементы before/after.
Либо, вариант сложнее: по образу и подобию создания следующего элемента QueryLoader.loadBar — добавить свой элемент с необходимой тебе картинкой.
Так чтоли?
Да, про такое примерно и говорил.
Только .QOverlay :before и .QOverlay :after — пробелы не нужны.
Чтобы работало у псевдоэлементов before и after обязательно надо указывать высоту, ширину, content (хотя бы пустым content:""), а также display:block или position:absolute
На эти псевдоэлементы тоже можно накладывать CSS или JS анимацию.
Здравствуйте! Пожалуйста напишите пару строк кода как добавить логотип в прелоадер.
Доброго времени суток. Большое спасибо за статью. У меня не большая проблема, может сможете помочь, не срабатывает completeAnimation: «grow».
Просто исчезает после скролинга а не раздвигается. По всякому уже пробовал. Сайт: https://mir-kino.online Спасибо.