Як зробити прелоадер поки йде завантаження. Робимо повноцінний JS-прелоадер для AJAX-додатки. Клонуємо зображення в циклі

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

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

1. < div id ="preloaderbg" class ="centerbg1" >
2. < div class ="centerbg2" >
3. < div id ="preloader" >
6. < script type ="text/javascript" >
7. document .getElementById ( "preloaderbg") .style.display \u003d "block";

1. .centerbg1 (
2. display: none;
3. width: 100%;
4. height: 100%;
5. position: absolute;
6. top: 0px;
7. left: 0px;
8. z-index 1000;
9. background: url ( "/ design / im / texture1.jpg") # 3c363e;
10. .centerbg2 (
11. position: absolute;
12. left: 50%;
13. top: 50%;
14. #preloader (
15. top: -50%;
16. left: -50%;
17. position: relative;
18. width: 333px;
19. height: 26px;
20. background: url ();
21. border: solid # edda3d 2px;

* This source code was highlighted with Source Code Highlighter.

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

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

2. document .body.style.overflow \u003d "visible";

* This source code was highlighted with Source Code Highlighter.

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

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

* This source code was highlighted with Source Code Highlighter.

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

1. clearInterval (pbPos);
2. document .getElementById ( "loaderbg") .style.display \u003d "none";

* This source code was highlighted with Source Code Highlighter.

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

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

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

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

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

1. < div id ="loaderbg" class ="centerbg1" >
2. < div class ="centerbg2" >
3. < div id ="preloader" >
4. < img src ="/design/im/progbar_ph.gif" />
5. < div id ="progbarfg" >

* This source code was 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, який сканує папку з картинками оформлення і заносить це все справа з розмірами файлів в масив, опціонально стискаючи.

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

* This source code was highlighted with Source Code Highlighter.

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

1. function fn (callBack) (
2. $ .Get ( "/", params, function (data) (someHandler (data); eval (callBack);));

* This source code was highlighted with Source Code Highlighter.

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

1. $data [ "js"] \u003d array (
2. array ( "path" \u003d\u003e "jquery-1.2.6.min.js", "size" \u003d\u003e filesize ($ jsRoot. "/ jquery-1.2.6.min.js")),
3. array ( "path" \u003d\u003e "functions.js", "size" \u003d\u003e filesize ($ jsRoot. "/ functions.js"))
4. $ Data [ "im"] \u003d GetFiles ($ imgRoot, true);
5. $ Data [ "invoke"] \u003d array (
6. "Action" \u003d\u003e "loadTemplates",
7. "Size" \u003d\u003e GetDirSize (dirname (__ FILE __). "/ Design / ajax templates /", false)
8. $ Data [ "jspath"] \u003d "/ design / js /";
9. $ Data [ "impath"] \u003d "/ design / im";

* This source code was highlighted with Source Code Highlighter.

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

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

Урок, на якому розглянемо процес створення прелоадера для сторінки (preload page). Як прелоадера будемо використовувати іконку Font Awesome або анімоване зображення gif, яке буде відображатися під час завантаження сторінки.

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

Сторінка будь-якого веб-сайту при її відкритті не завантажується миттєво. На завантаження і відображення сторінки витрачатися деякий час, яке може становити від 1 до декількох секунд. Щоб цей процес (тобто процес завантаження сторінки) якось згладити для користувача, йому на цей час можна показати анімоване зображення або іконку.

Процес створення прелоадера досить простий і полягає в тому, що нам необхідно показати деякий блок (# before-load), що містить анімаційне зображення або іконку, відразу після відкриття сторінки сайту. А після того як завантаження сторінки повністю завершитися, цей блок (# before-load) з анімованим зображенням gif або іконкою необхідно приховати від користувача.

Створення прелоадера для сторінки

Розробку прелоадера, який буде виглядати як білий фон з анімованої іконкою, виконаємо за 3 кроки:

1. Створимо HTML-код, що складається з блоку і іконки Font Awesome. Цей шматок коду необхідно розмістити в документі таким чином, щоб він відобразився користувачеві першим, тобто відразу після відкриваючого тега body:

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

   # Before-load (position: fixed; / * фіксоване положення блоку * / left: 0; / * положення елемента зліва * / top: 0; / * положення елемента зверху * / right: 0; / * положення елемента праворуч * / bottom : 0; / * положення елемента знизу * / background: #fff; / * колір заднього фону блоку * / z-index: 1001,; / * розташовуємо його над усіма елементами на сторінці * /) # before-load i (font-size : 70px; / * розмір іконки * / position: absolute; / * положення абсолютне, позиціонується щодо його найближчого предка * / left: 50%; / * зліва 50% від ширини батьківського блоку * / top: 50%; / * зверху 50 % від висоти батьківського блоку * / margin: -35px 0 0 -35px; / * зміщення іконки, щоб про а розташовувалася по центру * /) 3. Додамо сценарій, що приховує прелодер після завантаження сторінки (тобто коли відбудеться load у об'єкта window):

Якщо Ви хочете використовувати в якості індикатора прелоадера анімоване зображення 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/ або восвпользоваться цим архівом.

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

Для цього використовують анімовані прелоадери.

Ми вибрали для вас 20 цікавих прелоадера, виконаних за допомогою CSS3 і HTML5 або JQuery. Вони здатні помітно поліпшити користувальницький досвід.

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

Ось прості і елегантні завантажувачі, виконані за допомогою CSS. Можуть легко стати частиною будь-якого веб-проекту - просто скопіюйте і вставте код.

А це - соковитий прелоадер у вигляді веселки, створений на CSS. Підійде для яскравих, динамічних, молодіжних проектів!

А цей індикатор завантаження добре підійде для сайтів з картковим дизайном.

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

Динамічна анімація - різнокольорові блоки, які надає руху невелику кульку.

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

Цей дивовижний CSS-навантажувач підходить для різних проектів і програм. Простий і елегантний, а додати на сайт його можна в два кліка.

Тільки два кольори і прості фігури. Але яка цікава анімація! Цей прелоадер прикрасить будь-який ваш сайт.

Цей прелоадер ідеально підходить для динамічних проектів зі стильним, мінімалістським дизайном.

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

І ця картинка з розряду «не можу відірвати погляд». Просто заворожує, і гарантовано скрасить час очікування завантаження для ваших користувачів.

Якщо ви шукаєте індикатори завантаження, як на Tumblr, зверніть увагу на ці! Анімація на основі CSS, з використанням SVG іконок.

А це кругові інтерактивні CSS3 прелоадери. Наведіть курсор миші на окремі ділянки і подивіться на цікавий ефект.

Проста і елегантна анімація в пастельних тонах. Ідеальна для сайтів жіночої тематики.

А в цьому комплекті ви можете вибрати анімацію завантаження на свій смак. Будуть це годинник або просто білі кружки?

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

А тут ціла колекція анімованих загрузчиков. Є з чого вибрати, і все легко інтегруються в будь-який сайт.

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

Ще одна колекція індикаторів, з різною анімацією. Все прелоадери - у формі кола.

Ця анімація може бути накладена на текстовий логотип або будь-який текст - наприклад, на назву компанії, або її слоган.

Сподіваємося, що щось з цієї колекції стане в нагоді вам в роботі над наступним проектом!

Залежно від типу веб-ресурсу і обсягу інформації на ньому, завантаження сайту може зайняти від декількох мілісекунд до декількох секунд. У процесі завантаження з сайтом може відбуватися безліч речей: верстка може стрибати в різні боки, текст може змінювати накреслення. Виникає цілком закономірне бажання заховати всю цю вакханалію подалі від очей відвідувачів. Для цього і призначені прелоадери.

Прелоадер - це індикатор завантаження сайту. Він може бути виконаний як у вигляді анімованого gif-зображення, так і у вигляді шкали завантаження. Але незалежно від зовнішнього вигляду прелоадера, принцип його роботи буде одним і тим же: як можна раніше показати користувачеві індикатор завантаження, а після закінчення завантаження цей індикатор приховати.

Як завантажується веб-сторінка

Перш ніж створити індикатор якого б то не було процесу, потрібно розібратися в самому процесі. Завантаження веб-сторінок - не виняток. Отже, як же завантажується веб-сторінка?

1. Браузер відправляє запит на сервер.
2. Сервер починає відправляти браузеру html-код сторінки. Специфіка передачі даних в інтернеті така, що код сторінки браузер отримує не відразу, а частинами.
3. З метою економії часу браузер починає обробку html-коду сторінки, не чекаючи закінчення документа.
4. Як тільки в коді сторінки браузер зустрічає зовнішній ресурс, він відправляє на сервер запит на отримання цього ресурсу. При цьому, в більшості випадків, якщо цей ресурс - javascript-файл, то подальша обробка сторінки припиняється до повного завантаження і виконання javascript-коду цього файлу.
5. Як тільки браузер повністю отримав і опрацював html-код сторінки (обробник досяг закриття тега html), браузер викликає подія DOMContentLoaded, також відоме як DOM Ready.
6. Як тільки останній зовнішній ресурс завантажений, браузер викликає подія window.onload. Сторінка повністю завантажена.

процес створення

Тепер, розуміючи порядок завантаження веб-сторінки, можна сформувати для себе список завдань і умов для нашого прелоадера. Мої умови для нього такі:

• Повинен відображатися як можна раніше, закриваючи собою весь контент.
• По можливості, відображення не повинно залежати від зовнішніх ресурсів.
• Повинен ховатися, як тільки завантаження сторінки повністю завершена. Щоб приховати можна використовувати будь-яку доступну javascript-бібліотеку.

Якщо ваша сторінка практично не залежить від графіки, то замість window.onload для приховування прелоадера можна використовувати DOM Ready.

Для вирішення першого завдання помістимо наступний html-код відразу після відкриваючого тега body:

Для нашого прелоадера нам знадобляться стилі, але залежати від зовнішніх файлів ми не хочемо, тому розмістимо стилі прямо в документі, де-небудь всередині head:

# Page-preloader (position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: # 000; z-index: 100500;) # page-preloader .spinner (width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; background: url ( "/ images / spinner.gif") no-repeat 50% 50%; margin: -16px 0 0 -16px;)

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

Тепер залишилося тільки приховати наш прелоадер після завантаження сторінки. Тут ми вже не обмежені в засобах, тому можемо використовувати jQuery:

   $ (Window) .on ( "load", function () (var $ preloader \u003d $ ( "# page-preloader"), $ spinner \u003d $ preloader.find ( ". Spinner"); $ spinner.fadeOut (); $ preloader.delay (350) .fadeOut ( "slow");));

Готово! Тепер замість стрибків у різні боки верстки відвідувач під час завантаження сторінки буде бачити наш акуратний екран завантаження. А працюючу версію такого прелоадера можна побачити на сайті