如何使用wordpress在点击（如9GaG.com）上播放GIF？ [英] How to play a GIF on click (like 9GaG.com) with wordpress?

问题描述

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

I need to implement this "gif player" in a wordpress site, because gif pages are up to 6mb, so performance is really crappy

我读过这个 Onclick使用jQuery播放GIF图像并从头开始
这个
如何从一开始的onclick功能播放动画GIF几乎是一个解决方案，但我不知道如何在每个条目中使用wordpress完成这个

I´ve read this Onclick play GIF image with jQuery and start from beginning also this How to play animated GIF from the beginning onclick function that were almost a solution but i dont know how this should be done with wordpress in every entry

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

9gag.com does it perfectly; shows a preview image , reproduces the gif onclick, and stop the gif if its clicked again. If clicked again, plays the gif from the start again

如何使用wordpress完成此操作？

How can i accomplish this with wordpress?

推荐答案

9GAG基本上做了什么，它有两个图像 - 一个是动画GIF，另一个是JPG。

What 9GAG essentially did was it had two images - one was the animated GIF, and the other was a still JPG.

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

Before you clicked on it, it showed the JPG file. After you clicked on it, it loaded the GIF into the same <img> tag, and made you think it "played" the GIF image.

如果再次点击它，它会将JPG文件加载回< img> 标记，并让你认为它已暂停 GIF图像。

If you click on it again, it loads the JPG file back into the <img> tag, and made you think it "paused" the GIF image.

图像处理，就像只使用一个GIF并暂停和播放一样，实际上很难实用 - 这种方法之一更好的方法。

Image manipulation, like only using one GIF and pausing and playing it is far, far too difficult to be of practical use - this method is one of the better ways to do it.

以下是一些代码：

<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来实现的，就像这样：

Also, if you wish for speed, I think 9GAG does it by preloading the GIF beforehand, like this:

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

希望这有帮助。

这篇关于如何使用wordpress在点击（如9GaG.com）上播放GIF？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！