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

2018/04/03 2021/01/05

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

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);
		}
	});
});