如何使用 WordPress 点击播放 GIF（如 9GaG.com）？

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

我读过这个Onclick 使用 jQuery 播放 GIF 图像并从头开始 https://stackoverflow.com/questions/20249401/onclick-play-gif-image-with-jquery-and-start-from-beginning还有这个如何从onclick函数开始播放动画GIF https://stackoverflow.com/questions/20032860/how-to-play-animated-gif-from-the-beginning-onclick-function这几乎是一个解决方案，但我不知道如何在每个条目中使用 WordPress 来完成此操作

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

我怎样才能用wordpress来完成这个？

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>

希望这可以帮助。