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

Question

[Zukrine]

У меня есть скрипт, который запускает обратный прогресс бар. Когда значение переходит определенную границу, должна менятся картинка в формате 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();

Comments

[SagePtr]

Полагаю, это из-за того, что при width < 350 картинка постоянно меняется на саму себя. Нужно менять один раз, например, поменять условие на width == 350, или добавить проверку на src картинки или флаг.

[Zukrine]

SagePtr, да! Поставил дополнительные условия и все заработало! Спасибо большое. Можете написать его отдельным комментарием, чтобы я мог отметить его решением?

Answer 1

[SagePtr]

Данная проблема это из-за того, что при width < 350 картинка постоянно меняется на саму себя. Нужно менять один раз, например, поменять условие на width == 350, или добавить проверку на src картинки, или флаг.