Как сделать, что бы гифка воспроизводилась каждый раз заново?

Question

[De Slow]

Есть слайдер, в нем 5 слайдов, в каждом по гифке, как сделать так, что бы при открытии нового слайда, гифка вопроизводилась заново?
как здесь: daiwer-studio.com/protsess

Answer 1

[Stalker_RED]

UPD: Можно заменить src гифки туда-сюда чтобы перезпустить анимацию.
Вот пример с заменой на однопиксельную черную гифку:

let originalSrc = myGif.src
myGif.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=' // 1px black gif
myGif.src = originalSrc

Демо: https://jsfiddle.net/mtsb267m/

При этом новые запросы на сервер не происходят.

Comments

[De Slow]

Возможно оттуда как-то вытащить svg?

[Stalker_RED]

Lesha Weal: Да. Dev-tools пользоваться умеете?

[De Slow]

Stalker_RED: боюсь неправильно понять вас. Вы подразумеваете "Исходный код"?

[Stalker_RED]

Lesha Weal: Я говорю о вот этой штуке: https://developers.google.com/web/tools/chrome-dev...
Или о этой https://developer.mozilla.org/ru/docs/Tools

[De Slow]

Stalker_RED: знаю про нее, но как вытащить svg? -гифки могу(

[Stalker_RED]

Lesha Weal: Хм, похоже я что-то напутал и у них действительно только гифки
daiwer-studio.com/wp-content/themes/DaiwerTheme/im...
Они меняют background-image при смене слайда.

[De Slow]

Stalker_RED: не подскажите, как такое реализовать?

[Михаил]

Lesha Weal: Они каждый раз добавляют рандомный параметр к пути после ? и заставляют браузер заново грузить гифку. Такой себе хак конечно. Но когда гифки маленькие не критично в принципе =)

[Stalker_RED]

Михаил: Более того, они при каждой смене слайда зачем-то обновляют все 6 гифок.

[De Slow]

Михаил: Stalker_RED: а если заменить это mp4?
Возможно ли реализовать авто запуск гитки?

[Stalker_RED]

Lesha Weal: "Из коробки" браузер не может ни ставить на паузу ни перематывать гифки. Можно разобрать я уже писал, что можно разобрать гифку по кадром и показывать их в canvas. Хоть в обратном порядке.
Или менять src, чтобы запуск произошел заново. Вот пример с заменой на однопиксельную черную гифку: https://jsfiddle.net/mtsb267m/

При этом новые запросы на сервер не происходят.