Перезапустите gif анимацию без перезагрузки файла

Можно ли перезапустить анимацию gif без загрузки файла каждый раз? Мой текущий код выглядит следующим образом:

var img = new Image();
img.src = 'imgages/src/myImage.gif';

$('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );

Edit

Когда я вставляю gif в dom, он не перезапускает gif-анимацию. Я могу достичь этого, добавив случайную строку к изображению src, но это снова загрузит изображение.

Я хочу знать, можно ли перезапустить gif-анимацию, не загружая gif.

Ответы

Ответ 1

У меня было аналогичное требование.

var img = document.createElement("img"),
    imageUrl = "http://i73.photobucket.com/albums/i231/charma13/love240.gif";
img.src = imageUrl;
document.body.appendChild(img);

window.restartAnim = function () {
    img.src = "";
    img.src = imageUrl;
}

Ответ 2

например, на facebook - анимированные смайлики не являются .gifs, а набором статических фреймов в png файле с динамически установленным смещением фона. Таким образом, вы полностью контролируете свою анимацию из javascript - вы даже можете приостановить/приостановить ее или изменить ее скорость.

Можно разбить ваш .gif файл на отдельные фреймы и сгенерировать файл .png на стороне сервера динамически.

Это выглядит для меня хорошим проектом для выходных;)

Ответ 3

Просто заставьте его навсегда? в противном случае вы могли бы использовать запрос ajax каждый (продолжительность gif), чтобы перезапустить его.

даже с javascript это было бы возможно;

var gif
window.onload=function () {
  gif=document.getElementById('id')
  setInterval(function () {
    gif.src=gif.src.replace(/\?.*/,function () {
      return '?'+new Date()
    })
  },5000)//duration of your gif
}

Ответ 4

restartGif(imgElement){ 
  let element = document.getElementById(imgElement);
  if (element) {
     var imgSrc = element.src;
     element.src = imgSrc; 
  }
}

// Example:

restartGif("gif_box")

Ответ 5

Это может помочь вам,

var img = new Image();
src = 'imgages/src/myImage.gif';
img.src=src;
$('body').append(img);
setInterval(function(){
    t=new Date().getTime();
    $("img").attr("src", src+'?'+t);
},5000);

Ответ 6

создать функцию в javascript, а затем воспроизвести образ в том же месте. когда вы хотите воспроизвести Gif, вызовите эту функцию.

function replayGif(){
   var img = new Image();
   img.src = 'imgages/src/myImage.gif';

   $('#id').css('background-image', 'url("' + img.src + '?x=' + Date.now() + '")' );
}

Ответ 7

Самое простое решение для JavaScript:

Функция:

function restartGif(ImageSelector){
  var imgSrc=document.querySelector(ImageSelector).src;
  document.querySelector(ImageSelector).src=imgSrc;
}

Функция вызова:

restartGif(SELECTOR) // Example: restartGif('.homer')

Пример: http://jsfiddle.net/nv3dkscr/

Ответ 8

Попробуйте установить src анимации gif самому себе или снова установите в пустую строку, за которой следует исходный src.;)