Ещё один простой блог в интернете, одного из жителей Сызрани, который считает себя дизайнером, WEB-мастером и фотографом-любителем

просто блог

QR CODE для записиQR CODE для записи “QueryLoader — предзагрузка страницы на jQuery”

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. Просто следуйте инструкции.

  1. Скачайте архив со скриптом
  2. Загрузите содержимое на Ваш веб-сервер
  3. Подключаем jQuery в коде вашей страницы (обычно подключается перед закрывающим тегом </head>).
    Если у Вас на сайте уже подключен jQuery, то пропустите этот пункт.

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
  4. Добавьте следующий код в код вашей страницы, так же в хедер вашей страницы
    <link rel="stylesheet" href="css/queryLoader.css" type="text/css">
    <script type='text/javascript' src='js/queryLoader.js'></script>
    
  5. Следующий код поместите в конец страницы
    <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 и Максима Матюхина

  1. Андрей # link

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

  2. BaNru # link

    У меня всё нормально работает: http://demo.g63.ru/gal/index.html
    Попробуй использовать другую версию jQuery.
    Я для примера подключил с репозитария Google. Проверено — работает с версией 1.3-1.5.

    Сейчас поищу ошибку, почему не работает с более новыми библиотеками.

  3. BaNru # link

    Чтобы работало с новыми версиями jQuery — необходимо найти строчку

    } else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {

    и удалить из условия вторую часть

    && $(this).attr("tagName").toLowerCase() == "img"
  4. Андрей # link

    Не получилось найти данную строчку, не мог бы скинуть готовый файл jquery.js?

  5. Андрей # link

    К сожалению не помогло((

  6. BaNru # link

    Скинь ссылку на нерабочее или архив.

  7. BaNru # link

    У тебя виснет потому, что одна из картинок отсутствует, так еще и название кириллическими буквами. Но ошибка из-за отсутствия файла Россия.jpg

  8. Андрей # link

    Не из-за этого. Во-первых, файл Россия.jpg есть на компе, просто в архив его не добавил, а во-вторых, изменил название, но все равно не прет.)))

  9. BaNru # link

    Ты в опере что ли смотрел? Да, в опере всплывает ошибка.

    1) Так же отсутствует spas.jpg
    2) И еще, не знаю почему не работает, но не работает из-за ссылок

    <a href="#"><img src="script/berkut.jpg" alt="" /></a>

    Удали их

    <img src="script/berkut.jpg" alt="" />
  10. Slava # link

    А можно как-то сделать чтобы флеш элементы тоже не отображались до полной загрузки?

  11. BaNru # link

    Можно, но я бы не рекомендовал, ибо проблем будет много — не установлен флеш (например на мобильных системах), установлен flashblock — в этих случаях пользователи будут видеть черный экран и ни чего не понимать. Так ещё и флеш обычно весит очень много — пользователи устанут ждать. Лучше сделать подобное в самом флеше.

  12. zetaap # link

    На jQuery 1.7 следующая проблема возникает:

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

  13. BaNru # link

    1) Наверное потому что не успевают подгрузиться скрипты. Скрипт прелоадера и jQ лучше ставить в хедере, а не как рекомендуется — в конце документа.
    2) По второму пункту — надо смотреть пациента. И ты пробовал качать архив указанный в комментариях, он пофикшен для новых версий jQ?

  14. mailfix01 # link

    А как сделать, чтобы он открывался только на главной странице в джумла? Если через идентификатор (id=”idOfTheElement”), то какой необходимо сделать?

    И как сделать, чтобы показывался только при первом посещении, при последующих нет. Как я понимаю через куки, но как это реализовать?

  15. BaNru # link

    А как сделать, чтобы он открывался только на главной странице в джумла?

    Джумлу не знаю. Скорее всего там должен быть файл отвечающий за главную страницу. Вот там и надо добавить код. Точно не скажу.

    И как сделать, чтобы показывался только при первом посещении, при последующих нет. Как я понимаю через куки, но как это реализовать?

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

    Реализовать можно и через куки. Достаточно подробно подобное расписано в статье

  16. W_A_S_A_B_I # link

    Проблема большинства в том, что при использовании в css параметра:

    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));

    Скрипт пытается найти изображение и не находит, из-за чего виснет.

  17. W_A_S_A_B_I # link

    Нашел решение!
    Нужно в файле queryloader.js найти условие

    if ($(this).css("background-image") != "none") {
    	var url = $(this).css("background-image");
    } else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
    	var url = $(this).attr("src");
    }

    И поменять на

    if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
    	var url = $(this).attr("src");
    }

    т.е. мы убираем первую часть условия, т.к. она устарела в связи с появлением новых параметров CSS3.
    Далее идет обработка вариантов url’s вот она то и устарела,т.к. в «background-image» уже давно может быть всё что угодно кроме адреса к изображению.

    url = url.replace("url(\"", "");
    url = url.replace("url(", "");
    url = url.replace("\")", "");
    url = url.replace(")", "");

    У меня например запарывалось на градиенте.

  18. BaNru # link

    Спасибо! Добавил в статье ссылку на Ваш комментарий.

  19. W_A_S_A_B_I # link

    Почему проблемы с хромом?

  20. BaNru # link

    Извиняюсь, поправил! Сам не знаю почему :-)

  21. Максим Матюхин # link

    Правка W_A_S_A_B_I немного не рациональна.
    У меня на сайте очень много графики сделано как раз через «background-image», но при этом в этом свойстве попался и градиент.
    В итоге
    -без правки виснет
    -с правкой толку нет от модуля

    Предлогаю Менять на следующий код

  22. Максим Матюхин # link

    Вот сам код

    if ($(this).css("background-image") != "none") {
    	var url = $(this).css("background-image");
    	if(url.match('url')==null)url=''
    } else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
    	var url = $(this).attr("src");
    }

    Тут проверю что б свойстве «background-image» был именно адрес картинки

    Кроме этого после

    $(imgLoad).unbind("load");
    $(imgLoad).bind("load", function() {
    	QueryLoader.imgCallback();
    });

    Добавил

    $(imgLoad).unbind("error");
    $(imgLoad).bind("error", function() {
    	QueryLoader.imgCallback();
    });

    Это позволяет избежать подвисание если будет ошибка при загрузке

  23. Азамат # link

    Здаров, ребят. Как мне сместить фон лоадера пикселей на 30 влево? дело в том, что нативной полосы прокрутки у меня нет, а это место отведено под неё, я так понимаю, и лоадер работает, но на экране слева на 30px виден сайт.

  24. BaNru # link

    Азамат, самое простое, но не идеальное решение — найди вот этот кусок:

    if (QueryLoader.selectorPreload == "body") {
    	var height = $(window).height();
    	var width = $(window).width();
    	var position = "fixed";
    } else {
    	var height = $(QueryLoader.selectorPreload).outerHeight();
    	var width = $(QueryLoader.selectorPreload).outerWidth();
    	var position = "absolute";
    }

    И прибавь необходимое число пикселей:

    var width = $(window).width()+30;
    var width = $(QueryLoader.selectorPreload).outerWidth()+30;
  25. Евгений # link

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

  26. dogica # link

    Привет ребята!
    Пришлось повозиться.. но после часа работы довел до ума этот прелоадер.
    Спасибо за решение с зависоном на 98%.. воспользовался =)
    Вот как получилось.. если кому интересно

    3D World of Dogs & Puppies
    http://www.dogica.com

    Cпасибо за прелоадер!

  27. Ярослав # link

    Всем привет!
    Подскажите, как после раскрытия шторки серый цвет заменить на белый?
    Фон моего сайта белый и так выглядело бы гораздо красивее.
    Спасибо.

  28. BaNru # link

    Ярослав, цвет меняется в файле queryLoader.css

    .QLoader {
    	background-color: #CCCCCC;
    	height: 1px;
    }

    Или можно прописать данные стили в своих основных стилях.

  29. Ярослав # link

    Большое спасибо, нашел.
    Еще такой вопрос: на верхнюю часть шторки хочу вставить логотип, а на нижнюю — слоган. Как это сделать (желательно с минимальным использованием JS).
    Заранее благодарен за ваши ответы.

  30. BaNru # link

    Подобное можно реализовать на CSS с помощью псевдоэлементов :after и :before.

    Прикреплять их надо к классу QOverlay (или может QLoader).

  31. Ярослав # link

    Понял, получилось :)
    Еще вопрос: на мобильных анимация на протяжении всего ее действия отображается в левом верхнем углу экрана (не во всю ширину и высоту). Добавление свойств height i width по 100% не помогло.
    Есть идеи, как это исправляется?
    Спасибо.

  32. BaNru # link

    Попробовать добавить min/max-height/width

  33. Роман # link

    Здравствуйте подскажите пожалуйста сделал все как написано но когда заходишь на сайт сначала мелькает главная страница а потом появляется анимация!Как сделать чтоб сразу анимация была??
    сайт http://boutique-shop.zz.mu/

  34. BaNru # link

    Это происходит потому что скрипты не успевают загрузится. А грузятся они после загрузки HTML.
    Это происходит только при первой загрузке.
    Если это происходит постоянно, то ваши скрипты не кешируются у пользователя. Необходимо настроить сервер, чтобы скрипты начали кешироваться.

    Так же есть очень плохой способ.
    Для BODY поставить стиль DISPLAY:NONE, скрыв всё.
    А перед инициализацией QueryLoader.init();
    Прописать смену видимости BODY
    document.body.style.display = «block»;
    Но этот способ плох тем, что у кого отключены скрипты — тот вашу страницу вообще не увидит. Хотя в интернете в наше время это недоразумение популярно.

  35. Роман # link

    Кстати когда я просто сделал все по описанию было нормально, но когда я прописал

    http://prntscr.com/7rf2a4

    чтоб грузился скрипт только на главной, начало мелькать(((Может я не правильно что то прописал т.к. я самоучка и многих нюансов не понимаю
    Можно поподробнее как настроить сервер, использую хостинг от hostinger.com.ua

  36. BaNru # link

    Читаем внимательнее статью

    Следующий код поместите в конец страницы

    Кеширование

  37. Александр # link

    На локалке работает. На хостинге висит!

  38. BaNru # link

    Извиняюсь, что не ответил ранее, уведомления почему-то не приходили.

    Если проблема ещё актуальна, то предоставь ссылку, где весит, попробую подсказать причину проблемы.

  39. Родион # link

    Спасибо большое. С грехом пополам я все-таки смог установить.

  40. Родион # link

    Как вместо линии, поставить свою анимашку?

  41. BaNru # link

    Родион, за саму анимацию отвечает функция animateLoader, а создаётся анимация, вроде, в spawnLoader

  42. Родион # link

    Ни у кого нет примера, где хотяб над линией была анимация .gif?

  43. BaNru # link

    На строке

    QueryLoader.overlay = $("
    ").appendTo($(QueryLoader.selectorPreload));

    Далее ему назначается класс QOverlay

    Самое простое: по этому классу прописать через стили необходимую картинку фоном или через псевдоэлементы before/after.

    Либо, вариант сложнее: по образу и подобию создания следующего элемента QueryLoader.loadBar — добавить свой элемент с необходимой тебе картинкой.

  44. Родион # link

    Так чтоли?

    .QOverlay :before { 
    	background:url(../../images/load.gif)
    }
    .QOverlay :after {
    	background-color: #000000;
    	z-index: 9999;
    }	
    
    .QLoader {
    	background-color: #CCCCCC; 
    	height: 1px;
    }
    
    .QAmt {
    	color:#333333;
    	font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    	font-size:40px;
    	font-weight:bold;
    	line-height:50px;
    	height:50px;
    	width:100px;
    	margin:-60px 0 0 -50px;
    }
  45. BaNru # link

    Да, про такое примерно и говорил.

    Только .QOverlay :before и .QOverlay :after — пробелы не нужны.

    Чтобы работало у псевдоэлементов before и after обязательно надо указывать высоту, ширину, content (хотя бы пустым content:""), а также display:block или position:absolute

    На эти псевдоэлементы тоже можно накладывать CSS или JS анимацию.

  46. Василий Иванович # link

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

Оставить комментарий

В блоге включена ручная модерация комментариев. Нет смысла повторно отправлять комментарий.
Поля отмеченный звездочкой * обязательны к заполнению

Перед отправкой формы: