Як зробити відтворення gif при натисканні - прискорюємо завантаження сайту шляхом завантаження gif при кліці

Тему оптимізації сайту зараз зачіпають все частіше і частіше. І не дарма, так як веб стає все швидшим, а інформації ставати все більше. Тільки подивіться на кількість сервісів оптимізації зображень, CSS стилів, JS стилів з`явилося останнім часом. Домогтися швидкого завантаження сайту стало куди простіше, ніж це було раніше. Але навіть тут не все вирішується простими сервісами. Сьогодні ми розглянемо простий спосіб завантажувати GIF тільки при кліці.

Відео: Як прискорити завантаження Windows 10

Якщо ви хочете вивчити більш детально тему швидкості завантаження, то рекомендую наступні статті до прочитання:

• Чому не можна вставляти відео YouTube через iframe?
• PageSpeed Insights на 100% - Частина 1
• PageSpeed Insights на 100%. Частина 2 - «Скоротіть HTML»
• Ще один спосіб підвищити швидкість завантаження сторінок сайту (іконочние шрифти)

Так як стаття відноситься саме до GIF зображень, то рекомендую вивчити статтю зі створення GIF онлайн:

• 7 сайтів для створення GIF анімації онлайн

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

ДИВИТИСЯ ДЕМОСКАЧАТЬ ДЕМО

Плюси і мінуси завантаження GIF при кліці

Щоб наочно оцінити всі "за" і "проти" даного способу я представив все наочно в таблиці:

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

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

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

Саме в даному прикладі відмінності колосальні!

Що потрібно зробити до початку впровадження коду ...

Припустимо, вас надихнув даний спосіб і ви розумієте, що на вашому сайті знаходиться велика кількість GIF зображень, а ось швидкість завантаження страждає. І ви вирішили впровадити даний функціонал у себе на проекті (можливо майбутньому). Є невелика попередня процедура, при якій потрібно підготувати preview зображення, які необхідно показувати як тільки завантажився сайт. Тобто це саме ті зображення, які користувач бачить поки не клікнув на кнопку Play.

Що можна поставити на preview зображення? Тут є 2 варіанти: або робити для кожного GIF зображення своє preview, яке є його першим кадром, або зробити одне зображення, яке буде використовуватися на всьому сайті, незалежно від GIF зображення. Але, вирішити як буде краще для вашого проекту, вам необхідно самостійно.

Отже, ви підготували всі preview зображення для кожного GIF зображення і зараз готові впровадити функціонал, тоді переходимо до найцікавішого блоку! # 128578;

Блок "скопіювати-вставити"

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

Відео: Як прискорити завантаження WINDOWS 10

Почнемо, як завжди, з розмітки:

1 етап. HTML розмітка

123

lt;div class="Gif-with-play"gt;lt;img src="Img / self-portrait.jpg" alt="Self Portrait" data-srcgif="Img / self-portrait.jpg"gt;lt;/divgt;

ВАЖЛИВО: всі зображення повинні знаходитися в блоці з класом "gif-with-play". І друге важливе зауваження: необхідно вказати адресу до preview зображення в атрибуті"src"І ОБОВ`ЯЗКОВО вказати адресу до GIF зображення в атрибуті"data-alt".

Тут все! Йдемо далі

2 етап. CSS стилі

Насправді можна обійтися і без CSS стилів, а впровадити функціонал і все. Але ж людина навряд чи зрозуміє, що можна клікнути на зображення і просто проскролліт сторінку далі. Тому все ж потрібні стилі, які допоможуть користувачеві зрозуміти як працювати з цим компонентом сторінки:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788

.jpg-with-play {position: relative-background: url(`../img/loading.jpg`) transparent no-repeat center center-}.jpg-with-play: hover {cursor: pointer-}.jpg-with-play: hover: before {background-color: rgba(255,255,255,.56)-}.jpg-with-play: after,.play.jpg-with-play: after {content: ""-position: absolute-top: 0-left: 0-right: 0-bottom: 0-margin: auto-height: 120px-width: 120px--webkit-background-size: cover-background-size: cover-z-index: 10--webkit-transition: all .35s ease--o-transition: all .35s ease-transition: all .35s ease-opacity: 1-}.jpg-with-play: after {background-image: url(`../img/player-buttons/play_button.svg`)-}.play.jpg-with-play: after{background-image: url(`../img/player-buttons/stop_button.svg`)-}.play.jpg-with-play:not(:hover): after {opacity: .35-}.jpg-with-play: before {content: ""-position: absolute-top: 0-left: 0-height: 100%-width: 100%-background-color: rgba(255,255,255,.7)-z-index: 10--webkit-transition: all .35s ease--o-transition: all .35s ease-transition: all .35s ease-opacity: 1-}.play.jpg-with-play: before {background-color: rgba(255,255,255,0)-}.jpg-with-play img {opacity: 1--webkit-transition: all .35s ease--o-transition: all .35s ease-transition: all .35s ease-}.jpg-with-play.loading-hide img {opacity: 0-}.loading-hide.jpg-with-play: after,.loading-hide.play.jpg-with-play: after{opacity: 0-}@media screen and (max-width: 768px) {.jpg-with-play: after,.play.jpg-with-play: after {height: 60px-width: 60px-}}

Це самий базовий набір стилів, щоб показати кнопку Play. Я їх написав тільки для того, щоб ви розуміли принцип і змогли змінити кнопку (та й будь-які стилі) під себе і свій проект. Якщо ви помітили, то для GIF зображення, яке буде підставлена за допомогою JS замість preview, блоку-контейнера (в нашому випадку блоку з класом "gif-with-play") додається клас "play".

Хтось скаже, що можна було додати додаткові теги в HTML розмітку і до них прив`язати подія відтворення і зупинки GIF. Але я мені подобається формат з псевдоелементи : before і : after.

3 етап. javascript

Насамперед необхідно підключити бібліотеку jQuery. А потім розташувати нижче наступний скрипт:

123456789101112131415161718192021222324252627

(function($) {$(`.jpg-with-play`).on(`Click`, function() {var $ this = $(this),$ img= $ This.children(`Img`),$ imgSrc = $ Img.attr(`Src`),$ imgSrcgif = $ Img.attr(`Data-srcgif`),$ imgExt = $ ImgSrcgif.split(`.`)-if($ imgExt[1] === `Gif`) {$ This.addClass(`Loading-hide`)-$ Img.attr(`Src`, $ Img.data(`Srcgif`)).attr(`Data-srcgif`, $ imgSrc)-$($ img).load(function(){$ This.removeClass(`Loading-hide`)-})-} else {$ Img.attr(`Src`, $ imgSrcgif).attr(`Data-srcgif`, $ Img.data(`Srcgif`))-}$ This.toggleClass(`Play`)-})-})(jQuery)-

Для власників WordPress

Для вас є відмінне готове рішення у вигляді плагіна для WordPress. Плагін називається "WP GIF Player". Завантажити його можна тут - скачати плагін "WP GIF Player".

Основні переваги і можливості плагіна "WP GIF Player":

• "Відтворення" одночасно тільки одне зображення GIF
• Автоматичне створення зображень для превью GIF (вище нам необхідно було це робити самостійно)
• GIF зображення додаються дуже легко, за допомогою однієї кнопки
• Є можливість паралельної завантаження GIF зображень
• Можна виставити обмеження на максимальний дозвіл GIF зображення

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

висновок

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

Відео: Як прискорити завантаження в media-get?

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

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

Успіхів!