Як зробити гіф прелоадер із затримкою. Робимо повноцінний JS-прелоадер для AJAX-програми. Етапи створення прелоадера

Створення прелоадерів стало дуже модними, адже вони виглядають красиво, а головне змушують користувача не залишити сайт, поки він ще вантажиться.

Як зробити прелоадер для сайту?

Сам прелоадер можна зробити всього за пару секунд, якщо використовувати готові рішення або за пару хвилин, якщо писати все самому з чистого листа:)

Але давайте все по порядку...

Сама суть браузера полягає у тому, що він відображає код поетапно. Це означає, що браузер проходить весь код зверху вниз і якщо десь посередині коду він зустріне важкі JS скрипти, то сайт трохи застигне на цьому моменті.

Preloader робить так, що ми приховуємо весь контент сайту та відображаємо його повністю лише тоді, коли весь сайт буде завантажений з усіма скриптами та стилями.

Коротка схема роботи прелоадера:

• Буквально відразу після тега body, що відкривається, розміщуємо div c прелоадером;
• Включаємо прелоадер та приховуємо весь вміст сторінки;
• Після завантаження сторінки прибираємо preloader та показуємо сайт.

Тепер розберемося із кодом. Спочатку вам треба помістити div з прелоадером, щось на зразок цього:

AreaForLoader ( background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); overflow: hidden; position: fixed; left: 0; top: 0; right:0; bottom:0; z-index: 9999 ;)

Останньою справою вам треба приховувати прелоадер. Для цього можна скористатися наступним кодом на jQuery:

$(window).on("load", function () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader). delay(350).fadeOut("slow"); ));

По суті вам тільки залишається додати якусь гарну анімацію до ваших прелоадерів. Крім того, я знайшов кілька цікавих прикладів прелоадерів, так що ви можете їх глянути:

Створення прелоадера за допомогою плагінів

Також існують інші способи створення прелоадерів і смуг завантаження. Наприклад, ви можете скористатися спеціальним плагіном NProgress.js для створення гарної смуги завантаження або скористатися конструктором прелоадерів.

Якраз про ці дві речі відмінно розказано у відео уроці зі створення прелоадера, тому раджу вам подивитися цей відео урок:

Preloader $(document).ready (function () ( NProgress.start (); NProgress.set (0.4); setTimeout(function () ( NProgress.done (); ), 4000); )); #hellopreloader>p(display:none;)#hellopreloader_preload(display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px ;background: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) center center no-repeat;background-size:131px;)

Hello-Site.ru. Безкоштовний конструктор сайтів.

var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function()(el.style.opacity = el.style.opacity - 0. (el.style.opacity

2. Створимо стилі CSS для блоку div та елемента i (іконки).

#before-load ( position: fixed; /*фіксоване положення блоку*/ left: 0; /*положення елемента зліва*/ top: 0; /*положення елемента зверху*/ right: 0; /*положення елемента праворуч*/ bottom : 0; /*положення елемента знизу*/ background: #fff; /*колір заднього фону блоку*/ z-index: 1001; : 70px;/*розмір іконки*/ position: absolute;/*становище абсолютне, позиціонується щодо його найближчого предка*/ left: 50%; % від висоти батьківського блоку*/ margin: -35px 0 0 -35px; ): $(window).load(function() ( $("#before-load").find("i").fadeOut().end().delay(400).fadeOut("slow"); ));

Якщо Ви хочете використовувати як індикатор прелоадера анімоване зображення gif, то необхідно зробити на наступних етапах наступні зміни:

У HTML-коді прибрати класи Font Awesome:

У стилях CSS зробити наступні зміни (змінити правило #before-load i (..)):

#before-load i ( width: 70px; /*ширина gif-зображення*/ height: 70px; /*висота gif-зображення*/ position: absolute; left: 50%; top: 50%; background: url("assets /images/img.gif") no-repeat 50% 50%; /*розташування (url) зображення gif та ін. параметри*/ margin: -35px 0 0 -35px; )

Завантажити анімовані gif-зображення для Вашого сайту можна з http://preloaders.net/ або скористатися цим архівом.

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

Розглянемо іншу крайність – сайт для замовлення піци. Більшість відвідувачів замовляють піцу з мобільника - а це повільніша швидкість завантаження сайту в принципі і плюс фотографії. Прелоадер для таких сайтів буде дуже доречним, відвідувачі не бачитимуть непривабливий процес формування сторінки.

Зараз ми створимо класичний прелоадер, що обертається, на чистому CSS із застосуванням властивостей анімації.

Створимо простенький HTML-код, що складається з одного порожнього тега div з класом loader, крім звичайно тега body.

У файлі стилів пропишемо решту коду. Початок буде нагадувати шкільний урок геометрії - знайомство з фігурами.

Стилі для класу loader

Спочатку намалюємо квадрат сірого кольору суцільною лінією завтовшки 2 пікселя:

Loader (
border: 2px solid #eae4ea;
}

з шириною та висотою по 150 пікселів:

Loader (
width: 150px;
height: 150px;
}

Всього одним рядком коду квадрат став кругом:

Border-radius: 50%;

У кола створимо напівпрозору тінь:

Box-shadow: 0 -2px 2px rgba(0,0,0,.2);

А нижню рамку пофарбуємо у зелений колір:

Border-bottom: 2px solid #6ddfca;

Вигадуємо свою назву анімації, один повний оборот коло зробить рівномірно за 3 секунди, крутячись нескінченно, поки не завантажиться сторінка.

Animation: loader 3s linear infinite;

Псевдоелементи:before та:after

Одне коло добре, а три кола краще, тим більше, що два з них будуть "фейковими" - тільки в стилях, благо псевдоелементи дають таку можливість.

Малюємо внутрішній псевдокруг before всередині реального кола, в діаметрі на 20 пікселів (10px+10px) менше

Loader:before (
content: "";
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}

з рожевою нижньою рамкою і крутиться він буде швидше, ніж головне коло.

Loader:before (
border-bottom: 2px solid #d355be;
animation: loader 2s linear infinite;
}

Тепер справа за after кругом, він хоч і найменший, зате найшвидший, з 1 секунду зробить повний поворот і смужка у нього красива - фіолетова.

Loader: after (
border-bottom: 2px solid #8c23ec;
animation: loader 1s linear infinite;
}

Відступи після кола від основного кола - 22 пікселі.

Top: 22px;
left: 22px;
bottom: 22px;
right: 22px;

Анімація з кадрів @keyframes

Настав час запускати наші кола, робить цю властивість transform: rotate - що означає поворот. 0% – старт, а 100% – фініш. Кожне коло обернеться на 360 градусів.

Багато програмістів оптимізують JavaScript та CSS-код, щоб сторінка вантажилася швидше.
Але не всі вони роблять прелоадери, які дають користувачеві ефект суб'єктивно більш швидкого завантаження.

Спосіб №1. Дешево й сердито.
Ідея проста - необхідно помістити по центру картинку, яка показуватиме користувачеві, що сторінка все ще завантажується. Код досить простий, пишемо відразу після:

< div id ="preloaderbg" class ="centerbg1" >

< div class ="centerbg2" >

< div id ="preloader" >

< script type ="text/javascript" >

document .getElementById("preloaderbg" ).style.display = "block" ;

.centerbg1 (

display: none;

width:100%;

height:100%;

position: absolute;

top: 0px;

left: 0px;

z-index: 1000;

background: url("/design/im/texture1.jpg") #3c363e;

.centerbg2 (

position: absolute;

left: 50%;

top: 50%;

#preloader (

top: -50%;

left: -50%;

position: relative;

width: 333px;

height: 26px;

background: url();

border: solid #edda3d 2px;

* Цей source code був highlighted with Source Code Highlighter.

В результаті ми відразу після завантаження з'являється блок з анімованим прогрессбаром по центру сторінки. Параметр overflow потрібно змінювати для того, щоб не з'явилася смуга прокручування, і користувач не міг прокрутити вниз і подивитися на вміст сторінки.

Потім, коли все завантажилося - потрібно прибрати прелоадер і встановити overflow у положення visible.

document .body.style.overflow = "visible" ;

* Цей source code був highlighted with Source Code Highlighter.

Цю частину коду я помістив у файл із JS-функціями, plreloader1.js

Якщо робити прогрессбар з анімованого GIF-малюнку, то він може вийти занадто важким, часом навіть більше за саму сторінку, де його розміщують.
Тому краще намалювати смужку (наприклад, таку), поставити її як фон у блоку з ID preloader та рухати бекграунд-позишн за таймером.

document .getElementById("loaderbg" ).style.display = "block" ;

document .body.style.overflow = "hidden" ;

pbPos = 0;

pbInt = setInterval(function() (

document .getElementById("preloader" ).style.backgroundPosition = ++pbPos + "px 0" ;

}, 25);

* Цей source code був highlighted with Source Code Highlighter.

І після завантаження робимо ось що:

clearInterval(pbPos);

document .getElementById("loaderbg" ).style.display = "none" ;

* Цей source code був highlighted with Source Code Highlighter.

Результат роботи можна переглянути.

Цей спосіб має недоліки — Якщо ставити приховування прелоадера на onload, тобто. коли чекати, поки завантажаться усі картинки, то користувач може подумати, що сторінка просто зависла - фактично, крім анімації, нічого не відбувається. Якщо ж вішати на $(document).ready() з jQuery, то після зникнення прелоадера картинки тільки підвантажуватимуться.

Тому пропонується використати…

Спосіб №2. Істина десь поруч, або джедаї завдають удару у відповідь.
Для початку намалюємо 2 лінії завантаження - активну і не дуже.

Поставимо неактивну як фон, а активну зробимо фоном у дива, для якого змінюватимемо ширину в залежності від відсотка завантаження.

< div id ="loaderbg" class ="centerbg1" >

< div class ="centerbg2" >

< div id ="preloader" >

< img src ="/design/im/progbar_ph.gif" />

< div id ="progbarfg" >

* Цей source code був highlighted with Source Code Highlighter.

Progbar_ph.gif - це картинка висотою в 1 піксель і шириною з нашу смугу прокручування (цей приклад глючить без неї в IE, і я поки не знайшов іншого способу вирівняти по центру див з прогрессбаром).
Стилі такі ж, як і в попередньому способі, хіба що

#progbarfg (width: 0px; background: url('/design/im/progbar_fg.png'))

Тепер залишилося зробити невеликий скрипт, який динамічно підвантажуватиме вміст сайту та картинки. Він потрібний для того, щоб прогрессбар показувався і змінювався ще до того, як скачається використовуваний фреймворк та інші JS-файли.

Візьмемо середній сайт зроблений повністю на AJAX. Завантаження приблизно відбувається так:

• завантажується HTML-код
• починають вантажитися картинки
• потім якийсь фреймворк
• додаткові JS-файли (хоча краще все склеїти в один)
• запускається певна функція (або кілька), яка стягує додатковий контент.

Усьому цьому (за вирахуванням CSS та HTML) ми призначаємо вагу в байтах (або умовну вагу), наприклад, одиницю, і в міру завантаження кожного файлу (або виконання функції) ми рухаємо наш прогрессбар.

Я реалізував 2 методи - перший простий, включається так:
безпосередньо перед пишемо:

< script type ="text/javascript" >
dLoader.start("progbarfg", 333, "count");

Першим параметром йде ідентифікатор блоку з активною смугою завантаження як тло, другим - ширина картинки, третій параметр - це метод, яким вважатимемо вагу контенту.

Скрипт сканує всі картинки на сторінки і призначає їм вага 1. Всі JS-файли прописуються в його тілі, як я розповім трохи нижче.
Однак хочеться, щоб вага кожної одиниці контенту була не одиницею, а реальним обсягом в байтах. Та й для AJAX-додатків хотілося б одразу підвантажити всю графіку.

Для цього я написав скрипт на PHP, який сканує папку з картинками оформлення і заносить всю справу з розмірами файлів в масив, опціонально стискаючи.

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

dLoader.start("mainprogbarfg" , 333, "size" , function ()( $("#preloaderbg" ).fadeOut(250); ));

* Цей source code був highlighted with Source Code Highlighter.

Коли всі JS-файли завантажилися, запускаються функції, які є в масиві invoke. Якщо ми за допомогою jQuery підвантажуємо контент, то функція буде виглядати так:

function fn(callBack)(

$.get("/" , params , function (data)( someHandler(data); eval(callBack); ));

* Цей source code був highlighted with Source Code Highlighter.

PHP-скрипт робить наступне: він заносить в масив необхідні скрипти з їх розмірами, а також картинки та додаткові функції. Код:

$data ["js" ] = array (

array ("path" => "jquery-1.2.6.min.js" , "size" => filesize($jsRoot."/jquery-1.2.6.min.js" )),

array ("path" => "functions.js" , "size" => filesize($jsRoot."/functions.js" ))

$data ["im"] = GetFiles($imgRoot, true);

$data ["invoke" ] = array (

"action" => "loadTemplates" ,

"size" => GetDirSize(dirname(__FILE__)."/design/ajax templates/" , false )

$data ["jspath" ] = "/design/js/" ;

$data ["impath" ] = "/design/im" ;

* Цей source code був highlighted with Source Code Highlighter.

Вже після того, як завантажилися всі картинки та JS-файли, викликається подія onLoad, яку ви вказали у функції dLoader.start()

Ще є спосіб кастомізації процесу завантаження.

У цьому уроці розберемо, як зробити відсоткове співвідношення завантаження прелоадера з елементами на сторінці. Тут попрацюємо з jQuery, познайомимося з його методами, дізнаємося, як працюють цикли, створимо свою функцію, яка виконуватиме певні дії.

Етапи створення прелоадера

Отримаємо загальну кількість картинок на сторінці, дізнаємося відсоткове співвідношення, скільки відводиться на кожну картинку, в циклі заповнюємо прогрес бар до моменту, коли всі зображення з'являться на сторінці і зрештою при 100% завантаження, показуємо всю сторінку, а прелоадер приховуємо.

Це і буде загальною концепцією цього скрипту.

Переносимо всі файли у своє середовище розробки, запустимо Index, відкриємо консоль браузера і подивимося завантаження картинок, як із включеним кешуванням, так і без нього.

При вимкненому кешуванні ми отримуємо малюнки, але прогрес бар ще відпрацьовує. Якщо робимо тротлінг на 3G, то все тут змінюється, картинки ще не всі провантажилися, а прогрес бар заповнений на 100% і чекає завантаження сторінки до кінця.

Виною всьому час завантаження прелоадера і відсоток який задаємо в ручному режимі, з цими параметрами нам доведеться попрацювати.

Так як логіку скрипта будемо змінювати, нам немає необхідності його викликати в низу, адже прогрес бар тепер повинен завантажуватися першим, переносимо все підключення файлів у head.

Ініціалізуємо змінні

Повертаємося до скрипту, зверху ініціалізуємо кілька змінних.

Переміщаємо на верх змінну preloader = $("#preloader") , за допомогою якої приховуємо даний ідентифікатор. Їй скористаємося трохи пізніше.

Preloader = $("#preloader"), // селектор прелоадера

Решту коду можна закоментувати або видалити, він нам більше не знадобиться.

// $(window).on("load", function () ( // $preloader.delay(1800).fadeOut("slow"); // ));

Використовуємо бібліотеку jQuery для звернення до об'єктів картинок. Скористаємося функцією length за допомогою якої дізнаємося кількість зображень на сторінці, отриманий результат поміщаємо в змінну imagesCount .

ImagesCount = $("img").length, // кількість зображень

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

Console.log(imagesCount);

Отже, тепер ми знаємо, скільки є графічних зображень на сторінці. Далі можна розрахувати кількість відсотків, скільки приділяється на одну картинку.

100 ділимо на кількість картинок та отриманий результат заносимо у змінну. Для перевірки відразу відобразимо його в консолі.

Percent = 100/imagesCount; //кількість % одну картинку console.log(percent);

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

При виклику функції в параметрах, місце 100 прописуємо змінну з кількістю відсотків на одну картинку і змінюємо швидкість завантаження на 1000 щоб прогрес бар швидше вантажив початкові відсотки.

)).circularProgress("animate", percent , 1000);

Клонуємо зображення у циклі

Тепер наступним завданням потрібно створити копію кожного зображення, де з кожним клоном викликаємо функцію запуску прогрес бару, а під час виклику запускаємо прогрес бар, в якому провантажуємо на кожній картинки відведений йому відсоток, тим самим повністю заповнюючи прогрес до кінцевої точки.

Для цього створюємо цикл, де I це змінна лічильника, далі пишемо умову, поки I менше кількість зображень, збільшуватимемо лічильник на одиницю var i = 0; i< imagesCount; i++ , и в скобках выполнять следующие действия.

Створюємо змінну, в яку розміщуємо екземпляр об'єкта Image (тобто картинку), далі робимо копію src.

Браузер дозволяє відстежувати завантаження зовнішніх ресурсів – скриптів, картинок за допомогою події – якщо завантаження відбулася помилка.

Наступним рядком викликаємо функцію за допомогою події onload, в якій запускати прогрес бар, її опишемо трохи пізніше.

А другим рядком викликаємо подію наневіру, якщо раптом сталася помилка не завантажилося зображення.

For (var i = 0; i< imagesCount; i++){ // создаем клон изображений var img_copy = new Image(); img_copy.src = document.images[i].src; img_copy.onload = img_load; img_copy.onerror = img_load; }

Нижче описуємо функцію, яка запускає прелоадер і додає відсоток, пишемо function img_load() всередині до прогресу завантаження додавати відсоток який нам відомий. Для цього створюємо ще одну змінну з нульовим значенням, назвемо її progress.

Progress = 0; // точка відліку

І відразу створюємо ще одну змінну назвемо loadedImg з нульовим значенням. Вона ж буде лічильником, яким проводимо порівняння з кількістю клонованих зображень.

LoadedImg = 0, // лічильник завантаження картинок

Повертаємося у функцію, у нутрії робимо складання progress += percent , а результат зберігаємо в progress . Другий рядок збільшує лічильник loadedImg++ на одиницю.

Далі пишемо умова, якщо прогрес більше або дорівнює 100 (де 100 це загальна кількість відсотків) або лічильник loadedImg дорівнює кількості завантажених зображень imageCount, тоді можна видалити прогрес бар preloader.delay(400).fadeOut("slow"); інакше викликаємо прогрес бар, де збільшимо прогрес, і швидкість завантаження зменшуємо до 500.

Function img_load() ( progress += percent; loadedImg++; if (progress >= 100 || loadedImg == imagesCount)( preloader.delay(400).fadeOut("slow"); qBody.css("overflow", "" ); ) $(".dws-progress-bar").circularProgress("animate", progress, 500);

Через консоль перевіримо, як створюються нові об'єкти зображень.

Console.log(img_copy); console.log(img_copy.src);

Бачимо, що успішно створилися п'ять клонів зображень, у кожної є посилання, помилок немає функція успішно відпрацьовує.

Видалення прелоадера

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

Для цього все обернемо в умову, якщо кількість зображень більша за нуль imagesCount > 0 тоді будемо виконувати даний скрипт, інакше видаляємо прелоадер preloader.remove(); . Якщо умову пройшли, прелоайдеру додаємо чорне тло preloader.css("background", "#000"); , а в css цей стиль видалимо.

If (imagesCount >= imgSum && imagesCount > 0) ( preloader.css("background", "#000"); ) else ( preloader.remove(); )

Ініціалізуємо ще одну змінну, в яку поміщаємо селектор qBody = $("body") , і за умови прописуємо для селектора body блокування прокручування qBody.css("overflow", "hidden"); .

QBody.css("overflow", "hidden");

Тепер потрібно прокрутку розблокувати, для цього коли прелоадер видалятимемо, то для body очищаємо блокування qBody.css("overflow", ""); .

QBody.css("overflow", "");

Забираємо службове виведення інформації в консолі, і зберігаємося.

Доповнюємо функціоналом прелоадер

В принципі, прелоадер готовий, але не завжди нам буде цікаво його запускати при одній або двох картинках на сторінці. Для того щоб його зайвий раз не викликати, додамо змінну, назвемо її imgSum і помістимо в неї значення imgSum = 3; .

За умови допишемо, якщо кількість картинок буде більшою, або дорівнює нашій змінній (imagesCount >= imgSum && imagesCount > 0) тоді виконуємо умови, інакше видаляємо прелоадер. Тим самим за допомогою даної змінної imgSum можемо задавати прелоадера завантаження за певної кількості зображень.

Коли прогрес бар швидко відпрацьовує, у нас перескакує відсоток за 100, давайте одразу це поправимо. Відкриваємо файл plugin.js , у ньому знаходимо, де формується відсоток, і спочатку допишемо таку умову, перевіряємо значення відсотка, якщо воно більше 100, повертаємо тоді 100, інакше залишаємо його без змін.

global_settings.percent = (global_settings.percent > 100)? 100: global_settings.percent;

Додамо ще наскільки зображень, подивимося, як прелоадер поводитиметься при великій їх кількості, і заразом перевіримо додаткові налаштування.

На цій ноті урок я завершую, кому він був цікавий, обов'язково поділіться їм з друзями.

Урок підготував Горєлов Денис.