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>

希望这有帮助。

Answer 2

如果您不想暂停，可以轻松地重播gif文件。只需触发点击并将gif重新加载到图像标记中即可。

your_image = document.getElementById或者您想获取对图像的引用。然后为点击设置一个事件监听器。

然后your_image.src = your_image.src;而且gif会再次运行。

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

2 个答案: