任意のタイミングでgifアニメーションをWebページ上で再生する方法

gifアニメーションはgif画像が読み込まれたと同時に再生されます。そのためページの途中などにgifアニメーションがあるとページ訪問者は途中から見ざるを得ません。

そこでユーザーの任意のタイミングでgifアニメーションを再生させることが必要です。

ここでは画面をクリックしたときにgifアニメーションを再生する方法を紹介します。

任意のタイミングでgifアニメーションを再生する

gifアニメーションが再生されるのは画像が読み込まれた時なので、

  • ページ訪問時はgifアニメーションを読み込まず、代わりにサムネイル画像を準備する
  • サムネイル画像をクリックしたときに、gif画像を読み込むようにする

ことができれば、任意のタイミングでgifアニメーションを再生することができます。

ソースコード

HTML

  <img class="gif-animation" src="sample.png">

JS

// クリックイベントの登録
const images = document.querySelectorAll('img.gif-animation');
images.forEach((e) => {
  e.addEventListener('click', toggleImage);
});

// gifアニメーションへの切り替え
function toggleImage(){
  const image = this;
  const src = image.src;
  const before = image.getAttribute("data-before");
  image.setAttribute('data-before', src);

  image.src = before ? before : src.substr(0,src.lastIndexOf(".")) + ".gif";
}

解説

前準備として「同名の」サムネイルとなる静的画像(png)と、gifアニメーション画像(gif)を準備します。ここではそれぞれ”sample.png”, “sample.gif”とします。

ページ読み込み時にはサムネイルを表示したいのでHTMLにはsample.pngを表示するように指定します。またgifアニメーションへの切り替えを行えるようにclassに”gif-animation”を指定しています。

実際のgifアニメーションへの切り替えはJavaScriptで制御します。

1. クリックイベントの登録

まずquerySelectorAllで”gif-animation”をclassにもつ画像を取得します。そしてforEachをつかってそれぞれの画像にクリックイベントを付与します。(querySelectorAllで取得できる値は配列ではなくNodeListですが、forEachが利用できます)

クリックイベントにはtoggleImageというコールバック関数を指定しています。画像をクリックするとtoggleImage関数が呼ばれます。

2. gifアニメーションへの切り替え

toggleImage関数ではクリック毎にgifアニメーションとサムネイルの切り替えを行っています。

“data-before”という属性にはクリック前の画像リンクを格納しています。data-beforeにリンクが格納されていればその画像リンクを<img>のsrc属性に指定して表示する画像を切り替えます。格納されていなければリンクの画像の拡張子を”gif”にしています。初回クリックの場合は”data-before”には何も格納されていないので、クリック後にsample.gifが表示されるようになります。

3. サンプル動作

画像をクリックするとgifアニメが再生します。

WordPressでの注意点

WordPressでgifアニメーションが動作しない場合があります。この場合は以下を確認してみましょう。

画像設定をフルサイズにする

WordPressでは画像を貼り付ける際にサイズを設定することができますが、「フルサイズ」でないとgifアニメーションが動作しません。

srcset属性を消す

WordPressのバージョンによっては貼り付けた画像にsrcset属性が付与され、上記のサンプルのように画像の切り替えが正しく動作しない場合があります。srcsetを空にする方法はいろいろありますが、上記のサンプルを使う場合には以下のように処理を追加します。

JS

// クリックイベントの登録
const images = document.querySelectorAll('img.gif-animation');
images.forEach((e) => {
  e.addEventListener('click', toggleImage);
  e.setAttribute("srcset"."");
});

 

Related Posts