Решение Джейд О'Коннор работает, но, как уже говорилось, это уродливое решение.
Потому что каждый раз, когда вы посещаете страницу, изображение загружается с сервера. Это приводит к проблемам с большими изображениями. Это также увеличивает время загрузки страницы, поэтому это плохо для медленных соединений.
Есть ли лучшее решение?
Я понял что-то вроде этого:
Я восстановил анимированный GIF в цикле "навсегда" режиме. В моем gif было 20 кадров, и каждый показывается в течение 150 мс. Так что один шаг цикла длится 3 секунды. Я также создал jpeg-версию последнего кадра анимации.
Когда страница загружается, я использовал метод window.setTimeout () для замены gif на jpeg через 3 секунды. Потому что я хотел, чтобы последний кадр остановился, когда первый этап цикла завершен. Но были проблемы со временем. Когда отображается последний кадр, анимация перезапускается, прежде чем я смог заменить gif на jpeg. Есть ли способ определить, завершена или перезапущена анимация?