Можно ли программно определить, когда заканчивается цикл webp? - PullRequest
Новая
       27

Можно ли программно определить, когда заканчивается цикл webp?

1 голос
/ 10 июня 2019

Я использую webp, так как мне нужна поддержка прозрачности в формате видео / gif. Моя проблема в том, что мне нужно, чтобы элемент исчез после завершения анимации, и я не уверен, как именно я могу выяснить, когда это произошло, без жесткого кодирования (что может привести к несоответствиям на более медленном оборудовании).

До того, как я просмотрел последовательность PNG, но производительность была невелика, я бы лучше использовал этот формат, если это возможно.

Я использую JavaScript, и в настоящее время у меня просто есть тег в этом виде: 

<img src="../../../assets/animations/anim.webp">

1 Ответ

1 голос
/ 10 июня 2019

В настоящее время это невозможно. Вероятно, лучшее, что вы можете сделать, это добавить слушателя к событию загрузки изображений и установить таймер на ту же длину анимации GIF. (Аналогично этому ответу ) 

<img onload="stopImage();" id="myImg" src="../../../assets/animations/anim.webp">

А в JS: 

function stopImage()  {  
  setTimeout(
    () => document.getElementById('myImg').src = "../../../assets/staticImage.png"
    , 6700);   
}

Время загрузки сети сильно различается, но разница в скорости воспроизведения не должна быть кардинально другой для коротких анимаций. Если вам нужен хороший уровень контроля, то вы должны управлять анимацией вручную с помощью JS. Либо, как вы делали раньше с последовательностью PNG, или как рекомендовано в этот ответ с картами спрайтов CSS.

...