0

Я использую одну gif в разных частях страницы. При запуске в первом месте всё работает ок. Но когда я запускаю её ещё раз чуть позже в новом месте. То gif начинается не с первого кадра. Запускаю gif одинаковыми методом который создаёт новый div и помещает внутрь него правило с гифкой. Как запустить второй раз gif c первого кадра?

function addNewDiv(newDivID, into) {
  $('<div />')
    .css({
      position: 'relative',
    })
    .attr('id', newDivID)
    .appendTo(into);
}

setTimeout(function () {
          addNewDiv('multyArrowsReversUp', previousArrovPos);
        },2900);

#multyArrowsReversUp {
  transform: relative;
  transform: rotate(180deg);
  top: 83px;
  width: 100%;
  height: 148px;
  background: url(../../images/CST/Vector-Arrow_ANIM_Blue.gif) center center no-repeat;
  background-size: contain;
  z-index: 7;
  visibility: visible;
}
2
  • исправьте код, пожалуйста ,чтобы не было все в кучу. кнопка "вставить фрагмент кода" в редакторе. 28 окт 2022 в 10:52
  • по теме: думаю, поскольку гифка одна и та же, браузер ее кеширует и не утруждает себя перезапуском анимации. все гифки, сколько бы вы их не вывели на экран и в какое время - это одна и та же гифка, проигрываемая одновременно. попробуйте вместо нее сделать элемент со статичными картинками-кадрами, для которого будет запускаться css-анимация - она отработает в нужный момент. 28 окт 2022 в 10:55

1 ответ 1

1

Действительно, как писал @Инквизитор, браузер кеширует файл при скачивании и при повторном обращении к нему отдаёт файл из кэша. Поскольку файл тот же самый, то и текущее его состояние по отношению к веб странице также передаётся уже имеющееся. Поэтому одна гифка даже несколько раз размещённая на странице будет проигрываться синхронно.
Но можно прибегнуть к довольно известному хаку, суть которого заключается в создании уникального url. Как мы знаем, браузер распределяет в кэше файлы по url, так что один и тот же физический файл, имеющий разные url, для браузера будет разными файлами.
Так наша задача создать для гифок разные урлы, это легко сделать, прибегнув к строке параметров при помощи знака "?" и указать там текущее время.

<style>
    .giffer{
  background-size: contain;
  width: 300px;
  height: 200px;
}
  </style>
<button class="btn">add gif</button>
<script>
  document.addEventListener("click",(ev)=>{
    if(ev.target.closest(".btn")){
      let div = document.createElement("div")
      div.classList.add("giffer")
      div.style.background = `url(https://media.giphy.com/media/lwKJQw8uRG2wXgncRD/giphy.gif${"?" + Date.now()})`
      document.body.appendChild(div)
    }
  })
</script>
В результате каждая последующая созданная таким образом гифка будет новым файлом. Из плюсов тут - решение вашей проблемы, из минусов - каждый раз будет скачиваться новый файл, что может работать не так быстро, как в случае с гифками из кэша.

1
  • Спасибо большое за совет. Беру на заметку 31 окт 2022 в 12:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.