Як грати анімовані GIF-файли наClick

Анімований GIF є популярним способом візуалізувати концепцію дизайну (ось приклад того, як ми зробили це для ефектів, створених за допомогою CSS), або показуємо короткий відеокліп. Але якщо у вас надто багато з них на одній сторінці, це відхилить фокус користувача. Для сторінок, які демонструють багато GIF, це погана новина.

Рішення: надають користувачам статичне зображення і дозволяють запускати анімований GIF після натискання користувача. У цьому короткому підручнику ми покажемо вам, як це зробити.

• Переглянути демонстрацію
• Завантажити джерело

Починаємо

Почніть з підготовки папок і файлів проекту, які включають: файл HTML, jQuery і, нарешті, файл JavaScript, в якому ми напишемо наш код. Ви можете зв'язати jQuery з CDN або схопити копію і зв'язати її з каталогом проекту. Я б залишив стилі і CSS вашій уяві. Найбільш важливою частиною є розмітка HTML наступним чином:

Зверніть увагу на додаткові data-alt атрибута в img елемент. Саме тут ми зберігаємо GIF замість статичного зображення, яке ми спочатку обслуговуємо. Ви можете додати більше зображень, а також додати підпис для кожного з них figcaption елемент.

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

JavaScript

По-перше, ми створюємо функцію, яка буде отримувати шлях зображення GIF, який ми ввели data-alt атрибут. Ми будемо прокручувати кожне зображення і використовувати jQuery .дані () метод для цього:

 var getGif = function () var gif = []; $ ('img'). кожна (function () var data = $ (this) .data ('alt'); gif.push (data);); return gif;  var gif = getGif ();

Ми запускаємо функцію і зберігаємо вивід у змінну gif, як зазначено вище. The gif Змінна тепер містить шлях GIF з зображень на сторінці.

Попереднє завантаження зображення

Тепер ми маємо проблему завантаження: коли GIF ще не завантажено, є ймовірність того, що анімований GIF не буде відтворюватися миттєво (оскільки браузеру потрібно кілька секунд, щоб повністю завантажити GIF). Ця затримка відчуватиметься більш суттєво, коли розмір зображення GIF великий.

Потрібно попередньо завантажити або завантажити файли GIF одночасно під час завантаження сторінки.

 // Передбачити всі GIF. var image = []; $ .each (gif, function (index) зображення [index] = new Image (); image [index] .src = gif [index];);

Тепер відкрийте DevTools, а потім перейдіть до Мережа (або Ресурси). Ви помітите, що GIF-файли вже завантажені, навіть якщо вони збережені в data-alt атрибут. І наступний код - це все, що потрібно зробити.

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

Код буде міняти джерело зображення між src атрибут, де подається статичне зображення, і data-alt атрибут, де ми спочатку обслуговуємо зображення GIF.

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

 $ ('figure'). on ('click', function () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); if ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); else $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

І це все. Ви можете полірувати сторінку стилями, наприклад, ви можете додати кнопку відтворення, що накладає зображення, щоб вказати, що вона є “грати” або анімований GIF.

Ознайомтеся з демо-версією та завантажте джерело тут.

• Переглянути демонстрацію
• Завантажити джерело