@Zukrine

Не включается анимация gif до завершения скрипта. Можно ли пофиксить?

У меня есть скрипт, который запускает обратный прогресс бар. Когда значение переходит определенную границу, должна менятся картинка в формате gif. Она действительно меняется, но сама анимация начинается лишь тогда, когда скрипт завершает свою работу. Пробовал решить через addEventListener 'load', но не сработало, тогда картинка вообще не меняется. Как можно заставить ее анимироваться?

Код

function progressBarHealth() {
    let barHealth = document.querySelector('.health');
    let width = 490;
    let step = setInterval(progressStatus, 10);
    function progressStatus() {
        if (width < 0) {
            clearInterval(step);
        } else {
            width--;
            barHealth.style.width = `${width}px`;
            if (width < 350) {
                document.querySelector('.cat').src = `src/img/cat/hungry_cat.gif`;
            }
        }
    }
    return;
}


progressBarHealth();
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
SagePtr
@SagePtr
Еда - это святое
Данная проблема это из-за того, что при width < 350 картинка постоянно меняется на саму себя. Нужно менять один раз, например, поменять условие на width == 350, или добавить проверку на src картинки, или флаг.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы