WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる（最終版）

先回から作っているWordPressのアイキャッチ画像にマウスカーソルを重ねた時にプレビューが表示されるように、JavaScriptを使った仕組みで最後の仕上げをした部分を最終版として投稿します。

マウスオーバーでプレビューさせるまで

ここまで作ってきたアイキャッチ画像にカーソルを合わせた際の仕組みについての経緯は別記事をご覧ください。

WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる（改良版）

WordPressのアイキャッチ画像をマウスのホバーでアニメーションさせる

アニメーションGIFのロード画面を追加

実際にサイトに実装してしばらく動かしてみたところ、アイキャッチ画像からアニメーションGIFへの切り替えを繰り返すとアイキャッチ画像が空白になることがありました。

マウスカーソルが離れた際に、アニメーションGIFへのURLを消している部分をロード中の画像に差し替えることで、プレビューが再生されるまでの時間を稼ぐことにしました。

今回変更するのは、mouseleaveイベントの部分を以下のように変更します。

//mouseleaveイベント追加
_thumbs[i].addEventListener('mouseleave', function() {

  var _images = _thumbs[i].getElementsByTagName("img");
  _images = Array.prototype.slice.call(_images);
		
  for (let j = 0; j < _images.length; j += 1) {
    _images[j].style.visibility = "visible";
    var _url = "https://sample.com/wp-content/uploads/gif/gif-loading.png";
    this.style.backgroundImage = "url(" + _url + ")";
    this.style.backgroundRepeat = "no-repeat";
    this.style.backgroundSize = "100%";
  }
});

こんな感じで、visibilityをhiddenに設定して非表示にしていたアイキャッチ画像を、visible に設定して表示させた後で、アニメーションGIFを読み込む要素に、「ロード中の画像」を読み込ませておきます。

こうすることで、マウスカーソルがアイキャッチ画像に重なった時にアニメーションGIFが読み込まれる間に「ロード中の画像」が表示されてから、アニメーションGIFに切り替わるようになりアイキャッチ画像が空白になってしまう現象を回避することができます。

全体的なコードは次のようになります。

window.onload = function() {
  var _thumbs = document.getElementsByClassName("post-thumbnail");
  _thumbs = Array.prototype.slice.call(_thumbs);

  for (let i = 0; i < _thumbs.length; i += 1) {
    var _images = _thumbs[i].getElementsByTagName("img");
    _images = Array.prototype.slice.call(_images);
		
    for (let j = 0; j < _images.length; j += 1) {
      //mouseoverイベント追加
      _images[j].addEventListener('mouseover', function() {
        this.style.visibility = "hidden";
      });
    }
		
    //mouseoverイベント追加
    _thumbs[i].addEventListener('mouseover', function() {
      var _src = "";
      _images = this.getElementsByTagName("img");
      _images = Array.prototype.slice.call(_images);
			
      for (let j = 0; j < _images.length; j += 1) {
        var _url = "https://sample.com/wp-content/uploads/gif/sample-1.gif";
        this.style.backgroundImage = "url(" + _url + ")";
        this.style.backgroundRepeat = "no-repeat";
        this.style.backgroundSize = "100%";
      }
    });

    //mouseleaveイベント追加
    _thumbs[i].addEventListener('mouseleave', function() {
      var _images = _thumbs[i].getElementsByTagName("img");
      _images = Array.prototype.slice.call(_images);
		
      for (let j = 0; j < _images.length; j += 1) {
        _images[j].style.visibility = "visible";
        var _url = "https://sample.com/wp-content/uploads/gif/gif-loading.png";
        this.style.backgroundImage = "url(" + _url + ")";
        this.style.backgroundRepeat = "no-repeat";
        this.style.backgroundSize = "100%";
      }
    });
  }
}

まとめ

今回は短い記事ですが、WordPressの記事で設定されているアイキャッチ画像を、JavaScriptとアニメーションGIFを使ってYouTubeのプレビューのように動作させる仕組みを実際のサイトで運用した際にアイキャッチ画像が空白になってしまう現象がありました。

原因は、アイキャッチ画像が非表示になってからアニメーションGIFの読み込みに時間がかかる場合に、何も表示されない状態が発生してしまうことです。

そのため、マウスカーソルをアイキャッチ画像から離した際の処理でアイキャッチ画像を表示する際に、アニメーションGIFが読み込まれる要素に、「ロード中の画像」に切り替えておく処理を追加しました。

こうすることで、アニメーションGIFが読み込まれる時間に「ロード中の画像」が要素内に表示され空白になることを防ぐことができます。

WordPressのアイキャッチ画像をマウスカーソルが重ねた際にプレビュー動画を再生したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。