Как да играете Анимирани GIF файлове наClick

Анимираният 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'). (функция () 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, функция (index) image [index] = new Image (); image [index] .src = gif [индекс];);

Сега отворете DevTools след това над главата мрежа (или ресурси) раздел. Ще забележите, че GIF файловете вече са заредени, въпреки че са записани в данни н атрибут. И следното е целият код, който трябва да направите.

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

Кодът ще сменя източника на изображение между SRC атрибут, където се показва статичното изображение и. \ t данни н атрибут, където първоначално обслужваме 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 ('.'), ако ($ 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.

Вижте демото и изтеглете източника тук.

• Преглед на демо
• Изтеглете Източник