javascript - 如何使用 wordpress 在点击时播放 GIF(如 9GaG.com)？

Question

我需要在 wordpress 站点中实现这个“gif 播放器”，因为 gif 页面高达 6mb，所以性能非常糟糕

我读过这个Onclick play GIF image with jQuery and start from beginning还有这个 How to play animated GIF from the beginning onclick function这几乎是一个解决方案，但我不知道如何在每个条目中使用 wordpress 完成此操作

9gag.com 做得很完美；显示预览图像，重现 gif onclick，并在再次单击时停止 gif。如果再次单击，则再次从头开始播放 gif

我如何使用 wordpress 完成此操作？

Answer 1

9GAG 本质上所做的是它有两张图片 - 一张是动画 GIF，另一张是静态 JPG。

在您点击它之前，它会显示 JPG 文件。单击它后，它将 GIF 加载到相同的 <img> 中。标记，并让您认为它“播放”了 GIF 图像。

如果您再次单击它，它会将 JPG 文件加载回 <img>标记，并让您认为它“暂停”了 GIF 图像。

图像处理，例如只使用一个 GIF 并暂停和播放它太难了，无法实际使用 - 这种方法是更好的方法之一。

这是一些代码:

<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>

希望这对您有所帮助。