web-dev-qa-db-ja.com

WordPressでクリック（9GaG.comなど）でGIFを再生するにはどうすればよいですか？

この「gifプレーヤー」をwordpressサイトに実装する必要があります。これは、gifページが最大6 MBであるため、パフォーマンスが非常に悪いためです。

私はこれを読みました OnclickはjQueryでGIF画像を再生して最初から始めます これも アニメーションGIFを最初からonclick関数で再生する方法 これはほとんど解決策でしたが、わかりませんすべてのエントリでwordpressを使用してこれを行う方法

9gag.comはそれを完璧に行います。はプレビュー画像を表示し、クリック時にgifを再現し、もう一度クリックするとgifを停止します。もう一度クリックすると、最初からgifを再生します

どうすればワードプレスでこれを達成できますか？

javascriptjquerywordpressonclickanimated-gif
11
roquelage

9GAGが本質的に行ったことは、2つの画像があったことでした。1つはアニメーションGIFで、もう1つは静止JPGでした。

クリックする前に、JPGファイルが表示されていました。クリックすると、同じ<img>タグにGIFが読み込まれ、GIF画像を「再生」したと思わせることができます。

もう一度クリックすると、JPGファイルが<img>タグに読み込まれ、GIF画像を「一時停止」したと思わせます。

1つのGIFのみを使用し、一時停止して再生するなどの画像操作は、実用化するには非常に困難です。この方法は、それを行うためのより良い方法の1つです。

ここにいくつかのコードがあります：

<div id="gifdiv">
  <img src="staticgif.jpg" />
</div>
<script type="text/javascript">
  $("#gifdiv").click(function () {
    if ($(this).find("img").attr("data-state") == "static") {
      $(this).find("img").attr("src", "animatedgif.gif");
    } else {
      $(this).find("img").attr("src", "staticgif.jpg");
    }
  });
</script>

また、速度が必要な場合は、9GAGが次のように事前にGIFをプリロードすることでそれを行うと思います。

<script type="text/javascript">
  (new Image()).src = "animatedgif.gif"; // this would preload the GIF, so future loads will be instantaneous
</script>

お役に立てれば。

15
Lucas

一時停止したくない場合は、gifファイルを簡単に再生できます。クリックでトリガーし、gifを画像タグにリロードするだけです。

your_image = document.getElementByIdまたは、画像への参照を取得する必要があります。次に、クリックのイベントリスナーを設定します。

次に、your_image.src = your_image.src;そして、gifが再び実行されます。

2
bobbdelsol