web-dev-qa-db-ja.com

ファイルをリロードせずにgifアニメーションを再開する

毎回ファイルをダウンロードせずにgifアニメーションを再開することはできますか？私の現在のコードは次のようになります：

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

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

編集

GIFをDOMに挿入しても、GIFアニメーションが再開されませんでした。これは画像のsrcにランダムな文字列を追加することによってのみ達成できますが、これにより画像が再度ダウンロードされます。

Gifをダウンロードせずにgifアニメーションを再開できるかどうか知りたい。

javascriptjquerycssanimated-gif
18
3rfan

同様の要件がありました。

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;
}
7
Sai Dubbaka

たとえば、facebookの場合-アニメーション絵文字は.gifではなく、動的に設定された背景オフセットを持つpngファイルの静的フレームのセットです。このようにして、JavaScriptからアニメーションを完全に制御できます。アニメーションを一時停止/一時停止解除したり、速度を変更したりすることもできます。

.gifファイルを別々のフレームに分割し、サーバー側で動的に.pngファイルを生成することが可能です。

これは私にとって良い週末のプロジェクトのようです;）

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

// Example:

restartGif("gif_box")
1
kiss_von

永久にループさせるだけですか？それ以外の場合は、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
}
0
joostmakaay
function refreshgif() {
  var giffile = $(".gif-class");
  giffile.src = giffile.src;
}
0
Kelvin Chan