Как я могу создать анимационный фоновый режим GIF на каждом обновлении/загрузке страницы?

Question

У меня есть анимированный GIF-файл в качестве фонового изображения div, который был сохранен из Photoshop в цикл только один раз. Таким образом, единственный раз, когда он играет, - это исходная загрузка страницы.

Есть ли способ существенно удалить фоновое изображение и добавить его снова на странице обновления? Почти что DOM думает, что это новое изображение, зацикливая его снова?

Вот ДИВ:

<div id="name-logo"></div> 

и CSS:

position: relative; 
    width: 403px; 
    height: 93px; 
    margin: 50px auto 100px; 
    background-image: url(my.gif); 
    background-position: center; 
    background-size: contain; 
    background-repeat: no-repeat; 

Благодаря

Answer 1

Один из способов достижения этого - путем управления версиями. Это заставит дом полагать, что это новый образ.

document.getElementById('name-logo').style.backgroundImage = "url('my.gif?v=" + new Date().valueOf() + "')" 

Answer 2

Я уверен, если это даст вам точный результат, который вы ищете, но вы возможно, сможет использовать JavaScript для настройки интервала, который запускается каждый (какой бы длинный ни был ваш .gif). Так что, если она занимает второе место по вашему .gif для запуска, вы можете сделать что-то вроде этого:

setInterval(function() { 
    // clear out the current background image as it is 
    document.getElementById('name-logo').style.backgroundImage = "url('')"; 
    // reset the background image 
    document.getElementById('name-logo').style.backgroundImage = "url('my.gif')"; 
}, 1000); 

Опять же, я лично не проверял это, но это может привести вас в правильном направлении.