スクロールして画像が見えてからGIFアニメを再生させる【jQuery】

2022 4/14

2020年1月18日 2022年4月14日

動くGIF画像をホームページで表示させたとき、画像が見えてなくても、GIFアニメの再生が始まってしまいます。

ページをスクロールしていってGIF画像が見えたときには、すでに再生アニメは中盤に差し掛かっていた・・・としたくない場合は、スクロールして要素（画像）が見えたら、静止画像からGIFアニメ画像に切り替えるようにしましょう。

また、複雑なGIF画像はファイルサイズが大きくなりがちなので、最初にページを読み込むときにサムネイル画像を表示しておくことで、ページ読み込み速度向上にも繋がります。

方法：静止画を用意して、jQueryで切り替える

GIF画像は読み込みが完了した時点で、可視エリア（ウィンドウ内）にあろうが無かろうが再生を始めてしまいます。

そのため、ページをスクロールして画像がウィンドウ内に現れるまで、別の静止画像を表示しておきます。

そしてその静止画像がウィンドウ内に現れたら、jQueryで本来のGIF画像に切り替えて再生をスタートさせます。

コードは下記になります。

<img src="demo.png" id="gif-anime">

$(window).scroll(function(){
	var top = $("#gif-anime").offset().top;
	var position = top - $(window).height();

	if($(window).scrollTop() > position + 100){ //画像の上100pxが見えたらGIF画像に切替
		if($('#gif-anime').hasClass('active')){
		} else {
			$('#gif-anime').attr('src', './images/demo.gif');
			$('#gif-anime').addClass('active');
		}
	}
});

デモはこちら

また、最初に表示させておく静止画像は、閲覧者に違和感を与えないように、GIFアニメ画像の冒頭シーンにしておくのがオススメです。