JavaScript

SVG・GIFアニメーションをリロードしたら再生できない場合の対処方

JavaScript

リロードしても再生できない原因

webブラウザにキャッシュが残り、「再生は完了状態」になってしまっているから。解決策としては違う画像と認識させる必要がある。

解決策

HTML

<section class="block">
  <img src="" alt="">
</section>

jQuery

$(function(){
  var now = new Date().getTime();
  $('.block img').attr('src','../images/interview.svg'+'?'+''+now);
});

ここで実装しているのは、画像の末尾にリロードした「時間ミリ秒」の数値を付け足していること。これにより違う画像と認識される。

可視範囲に入るとアニメーションしたい場合

スクロール後、可視範囲に入るとアニメーションを再生したい場合は下記のコードで実装可能です。

$(function(){
  $('.block img').hide();
  var now = new Date().getTime();
  $(window).scroll(function (){
    var target = $('.block').offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > target - windowHeight){
      $('.block img').show().attr('src','../images/interview.svg'+'?'+''+now);
    }
  });
});

あなたにおすすめの記事