Как играть в анимированные GIF-файлы на клике

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

Решение: обслуживать пользователей со статическим изображением и разрешать запуск только анимированного GIF по щелчку пользователя. В этом коротком уроке мы покажем вам, как это сделать..

• Посмотреть демо
• Скачать исходный код

Начиная

Начните с подготовки папок и файлов проекта, которые включают в себя: файл HTML, jQuery и, наконец, файл JavaScript, в который мы напишем наш код. Вы можете связать jQuery с CDN или взять копию и связать ее с каталогом вашего проекта. Я бы оставил стили и CSS для вашего воображения. Наиболее важной частью HTML-разметки является следующее:

Обратите внимание на дополнительные данных альт атрибут в IMG элемент. Здесь мы храним GIF вместо статического изображения, которое мы изначально обслуживаем. Вы можете добавить больше изображений, а также добавить подпись для каждого через figcaption элемент.

После этого мы напишем JavaScript, который принесет волшебство. Идея состоит в том, чтобы обслуживать изображение GIF, когда пользователь нажимает на изображение..

JavaScript

Сначала мы создаем функцию, которая будет извлекать путь изображения GIF, который мы указали в данных альт приписывать. Мы будем перебирать каждое изображение и использовать jQuery .данные() способ сделать это:

 var getGif = function () var gif = []; $ ('img'). each (function () var data = $ (this) .data ('alt'); gif.push (data);); вернуть gif;  var gif = getGif ();

Запускаем функцию и сохраняем вывод в переменную GIF, как указано выше. GIF переменная теперь содержит путь к GIF из изображений на странице.

Предварительная загрузка изображения

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

Нам нужно предварительно загрузить или загрузить GIF одновременно с загрузкой страницы.

 // Предварительная загрузка всего GIF. var image = []; $ .each (gif, function (index) image [index] = new Image (); image [index] .src = gif [index];);

Теперь откройте DevTools, затем перейдите к сеть (или же Ресурсы) вкладка. Вы заметите, что GIF-файлы уже загружены, даже если они сохранены в данных альт приписывать. И ниже приведен весь код, необходимый для этого..

Последний кусок кода, где мы связываем каждый фигура элемент, который оборачивает изображение с щелчок событие.

Код поменяет местами источник изображения между ЦСИ атрибут, где подается статическое изображение и данных альт атрибут, где мы изначально обслуживаем изображение 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.

Проверьте демо-версию и загрузите исходный код здесь.

• Посмотреть демо
• Скачать исходный код