Preloader сторінки. Робимо повноцінний JS-прелоадер для AJAX-програми. Доповнюємо функціоналом прелоадер
Привіт друзі. Буває таке, що через використання важких плагінів і сайт вантажиться недозволено довго. У таких випадках я рекомендую позбавлятися їх, або шукати менш «важкий» аналог. Але іноді його просто немає. У такому випадку можна спробувати використати прелоадер, щоб трохи розважити (відволікти) користувача. Але не всі знають, як такий функціонал реалізувати.
Насамперед варто згадати, що використання прелоадера доцільно у випадках, коли довго вантажиться головний екранабо тоді, коли контент вантажиться шматками. Все це може призвести або до миттєвого відходу користувача з сайту, або негативного враження про компанію вцілому.
Як зробити прелоадер для landing page
Перш ніж почати робити preloader, потрібно трохи усвідомити суть того, як браузер завантажує сторінку. Не буду розписувати весь цикл, так як у самого досить абстрактне уявлення, але важливо зрозуміти, що з метою економії часу, браузер вантажить (відображає) код поетапно і не чекає повного завантаження сторінки, а у разі підключення js, так взагалі припиняє завантаження, поки не виконає файл, що підключається. Це означає, що завантаження (відображення) решти контенту припиняється до повного завантаження js файлу. Загалом проблем достатньо, давайте тепер спробуємо їх вирішити за допомогою прелоадера.
Тепер кілька слів для розуміння того, що ми робимо:
- На самому початку розміщуємо div з прелоадером
- Приховуємо прелодером вміст сайту до повного завантаження сторінки
- Приховуємо прелоадер та показуємо сторінку
Тепер, відразу після відкриття тега body розмістимо наступний div:
Швидше за все, якщо у вас проблеми із завантаженням сайту, значить у вас багато якісних зображень та різних великовагових скриптів, а значить, ви напевно використовуєте і jQuery, тому для того, щоб наш preloader зник після того, як завантажиться основний вміст, скористаємося наступним скриптом :
Розміщуйте його десь після підключення jQuery.
Трохи поясню html. LoaderArea – фонова область, яка перекриває основний контент. CSS цього дива такий:
LoaderArea ( background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%); overflow: hidden; position: fixed; left: 0; top: 0; right:0; bottom:0; z-index: 100000 ;)
Loader – це активна область (сам прелоадер). Так як я вирішив робити його за допомогою лише CSS, то у нього такі стилі:
Loader ( height: 40px; width: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; ) .loader:before, .loader:after ( content : ""; height: 40px; width: 40px; ; ) @keyframes animate ( 0% ( transform: rotate(0) skew(0); ) 100% ( transform: rotate(180deg) skew(360deg); ) ) .loader:after ( animation: animate2 2s infinite linear; ) @keyframes animate2 ( 0% ( transform: rotate(0) skew(0); ) 100% ( transform: rotate(-180deg) skew(-360deg); ) )
Вихідник прелоадера я взяв з Codepeen. Ось посилання на кілька цікавих варіантів.
Сьогодні говоритимемо про те, як приховати завантаження сайту на WordPress за допомогою прелоадера. Усі ми бачили такі сайти, на яких замість білого екрана завантаження виводитиметься анімоване зображення. Цей маленький трюк може допомогти в тому випадку, якщо у вас повільно завантажуватися сайт, але ви все ж таки хочете утримати нетерплячих користувачів, які не люблять по боргу дивитися на порожній білий екранмонітора. Ну що поїхали додавати прелоадер для сайту WordPress
Перед тим як почну описувати плагін та принцип його роботи, рекомендую . Тільки якщо всі зазначені рекомендації не допоможуть, тоді вся надія на прелоадер і його вплив на терпіння користувачів сайту.
Що таке прелоадер (preloader)
Прелоадер – це механізм виведення анімації або індикатора завантаження, до повної обробки веб-сторінки та виведення її на екран. Іншими словами, доки сторінка сайту обробляється та завантажується браузером, на екран виводиться анімація, яка замінює порожній екран.
Я противник даного інструменту, вважаю, що краще оптимізувати завантаження сайту, ніж ставити прелоадер. У моєму розумінні прелоадер потрібен лише великим порталам, інтернет магазинам та інтернет сервісам з величезними базами даних, які обробляють мільйони даних і у них ну ніяк не вдасться прискорити завантаження. Це особисто моя думка і зі мною ви можете не погодитись.
За статистикою, якщо сайт вантажиться більше 4 секунд, виникає велика ймовірність відмови. Користувач може залишити сайт так і не дочекавшись повного завантаження, а це дуже поганий показник. При нормальній оптимізації, не ідеальної, але все ж таки, мій сайт завантажується за 2-3 секунди і цей показник цілком влаштовує мене, і як показує статистика користувачів теж. Тому ще раз говорю про те, при повільному завантаженні сайту потрібна оптимізація, а не прелоадер.
Після невеликої передмови повернемося до наших «баранів». Встановимо та налаштуємо плагін.
Плагін The Preloader, огляд та налаштування
Найадекватніший і найбезкоштовніший плагін прелоадер, який я знайшов це плагін з унікальною назвою - Прелоадер. Та ось так, жодних несподіванок. Справа в тому, що при пошуку плагіна в бібліотеці wordpress.org ви його не знайдете. Потрібно у рядку пошуку писати the preloader. Як встановлювати плагін можна дізнатися. Виглядає він так:
Після установки переходимо у вкладку Плагіни/Preloader, з цього невеликого меню і розпочинаються налаштування.
Отже, всі налаштування у короткому списку:
- Першим рядком налаштування є колір заднього фонупрелоадера, за замовчуванням він білий (#FFFFFF). Ви можете задати параметр, що вас цікавить.
- Друге, це місце розміщення gif анімації, її можна буде поміняти на будь-яку, потрібно лише враховувати розмір 128х128 пікселів. За запропонованим в налаштуваннях посиланням ви можете завантажити цікаву для вас анімацію.
- Наступним кроком буде вибір директорій, де підвантажуватиметься прелоадер. Можна встановити завантажувач на категорії, на весь сайт, окремо на сторінки тегів, або тільки на головну, вам вирішувати.
- Останнє що вам потрібно зробити це відкривати файл header.php в папці вашої активної теми і додати відразу після тега, що відкривається запропонований див ( ).
- Якщо плагін активний, тоді ви можете вже переконатися у працездатності плагіна.
Варто ще помітити, що при зміні GIFки її назва має бути preloader, і така анімація в папці плагіна image має бути тільки одна.
На цьому скромний посібник із використання плагіна Preloader для сайту на WordPress закінчено, якщо будуть питання чи проблеми, пишіть у коментарях.
Доброго часу доби шановні передплатники, читачі та просто відвідувачі нашого сайту! Починаю цей матеріал я з нового ступеня для себе відліку, а точніше з 101 уроку, який, сподіваюся, Вам знадобиться і сподобається. Взагалі, використання прелоадера для сайтушироко відома темасеред різних анімації та ефектів, але я помічав, що багато з них мають дуже громіздкий і не зручний код, тому вирішив написати щось простіше і використав для цього jQuery.
Розглядаючи даний матеріал, хочу помітити, що виконання даного коду працює щоразу при оновленні сторінки і якщо Вам це потрібно зробити при натисканні або завантаженні сторінки, можете написати в коментарях сайті, тоді зможемо розібрати більш детально даний матеріал.
І так, перш ніж приступити до вивчення коду, я підготував спеціально для Вас відеоматеріал, з докладним ознайомленням даного уроку, який Ви також можете подивитися, якщо не хочете читати текст або раптом у Вас виникли будь-які питання.
Перший крок. HTML.
Для початку, я вирішив зробити картинку, яка має дозвіл GIFформату, що дозволяє нам ефективніше використовувати прелоадер для сайту. Цю картинку я завантажив у папку imgде і буде лежати звичайна картинка PNG, яка буде використовуватись після завантаження сторінки.
Тепер нам варто підключити необхідні стилі та скрипти, щоб цей код успішно відпрацьовував. Підключаємо бібліотеку jquery.min.js, а також сам скрипт load.js, який буде виконувати функцію прелоадера. Також не забуваємо про стилі, які у нас знаходяться у файлі demo.css.
Далі створюємо divблок із ідентифікатором load, який і буде взаємодіяти зі скриптом та виконувати цей ефект. Після створення блочного контейнера, в ньому розміщуємо картинку, нашої GIF анімації і трохи нижче виводимо якийсь довільний текст.
Завершуємо HTMLкод простим виведенням картинки PNG.
Другий крок. jQuery.
Сам скрипт дуже простий, чи не знаю чи потрібні будуть коментарі, але думаю все-таки напишу, щоб було менше запитань. Ну, по-перше, скрипт працює у вікні, що виконує вимоги ідентифікатора load. По-друге, цьому ідентифікатору надається зачіпка за допомогою функції delayв 2500 мс, щоб якраз таки було видно цей ефект, після йде функція fadeOutзі значенням slowщо дозволяє показувати нам сам сайт після затримки. Все досить просто і просто, як бачите.
$(window).on("load", function () ( $("#load").delay(2500).fadeOut("slow"); ));
Третій крок. CSS.
Переходимо до останнього кроку, в якому пропишемо всі потрібні стилі для правильної роботи скрипта. Відразу хочу відзначити, що всі властивості та значення (крім, мабуть, background, text-align) ідентифікатора loadі load divобов'язкові, інакше правильно у Вас нічого не працюватиме.
Тоді я трохи подумавши, вирішив, що потрібно щось, що приховає завантаження сайту, а покаже щось на заміну, а коли сторінка завантажиться повністю, тоді вже буде показаний відвідувачу в повному обсязі. Пошукавши трохи те, що мені потрібно, я схрестив кілька скриптів і трохи додав свого в стилях, я отримав потрібний мені результат. Тепер відвідувачі посадкової сторінки бачать невелику заставку, перш ніж побачать завантажений контент. Скрипт працює таким чином, що він завантажується в першу чергу і показує те, що ми поставимо в налаштуваннях, після завантаження сторінки браузер викликає подію window.onload і наш скрипт показує завантажену сторінку.
Виглядає це приблизно так, чим довше вантажиться сторінка, тим довше буде показана заставка:
На свій сайт або сторінку підключити такий прелоадер можна досить не складно. Перше, що знадобиться зробити для здійснення задуму, це звичайно вставити HTML розмітку. Зробити це можна, наприклад, у шапці сайту. Вставте в будь-яке місце, найкраще відразу після тега, що відкриває body. Це основний блок із ID p_prldr, який буде заповнювати весь екран і всередині якого можна розташувати будь-що, що побачить відвідувач до повного завантаження сторінки. Усередині цього блоку розмістимо анімацію завантаження та текст.
#p_prldr( position: fixed; left: 0; top: 0; right:0; bottom:0; background: #9A12B3; z-index: 30;) .contpre small(font-size:25px;) . : 250px, height: 100px, position: absolute, left: 50%; top: 48%; margin-left: -125px; margin-top: -75px; -2px;text-align:center;line-height:35px;) #p_prldr. -size:41px; margin: -16px 0 0 -16px;)
Блок із класом svg_anmЦе наша анімація. У своєму прелоадері я використовую SVGграфіка для анімації. Її можна масштабувати до потрібних мені розмірів і вона виглядає реалістично і прикольно. Якщо хочете, можете використати якусь GIF анімаціюабо просто статичне зображення, все залежить від Вашої фантазії. У мене це файл oval.svgйого розмір я встановив параметром background-size:41px;, також потрібно вказати ширину та висоту блоку рівну розмірам анімації. width: 41px; height: 41px;
Якщо Вам теж до душі така анімація, можете вибрати з наведених нижче, для цього правою кнопкоюмиші клацніть по потрібній та збережіть у потрібну папку.
Та й самі анімації.
Фон анімації встановлений вручну і він буде у Вас як в основному блоці прелоадера, анімація сама біла, так що якщо відкриєте її після скачування, то нічого не побачите 🙂 Щоб потім не писали, що не працює.
Щоб все запрацювало, потрібно додати сам скрипт прелоадера, але спочатку Ви повинні переконатися, що у Вас підключена бібліотека jQuery. Якщо це не зроблено то в шапку перед тим, що закривається headабо в підвал перед тим, хто закривається bodyдодаємо такий рядок:
Після неї вставляємо вже сам скрипт.
Якщо Ви не змінювали айді головного блоку та клас блоку з анімацією, то у скрипті міняти нічого не треба. Можна лише налаштувати одну річ, а саме, затримку перед показом сторінки. Коли сторінка завантажиться, блок анімації зникне і плавно з'явиться вміст сторінки, але можна встановити ще затримку. У даному скрипті вона дорівнює 500 мілісекундам, тобто пів секунди, можете зменшити або навпаки збільшити якщо Вам це потрібно.
Все зроблено правильно і результат має порадувати Вас. Головне не поспішайте та уважно виконайте інструкцію.
На цьому все, дякую за увагу. 🙂
У цьому уроці розберемо, як зробити відсоткове співвідношення завантаження прелоадера з елементами на сторінці. Тут попрацюємо з 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, в якій запускати прогрес бар, її опишемо трохи пізніше.
А другим рядком викликаємо подію onerror, якщо раптом сталася помилка не завантажилося зображення.
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 дорівнює кількості завантажених зображень imagesCount , тоді можна видалити прогрес бар 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;
Додамо ще наскільки зображень, подивимося, як прелоадер поводитиметься при великій їх кількості, і заодно перевіримо додаткові налаштування.
На цій ноті урок я завершую, кому він був цікавий, обов'язково поділіться їм з друзями.
Урок підготував Горєлов Денис.