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

问题描述

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

我读过这个 点击播放 GIF 图片使用 jQuery 并从头开始还有这个如何从onclick函数开始播放动画GIF 这几乎是一个解决方案，但我不知道如何在每个条目中使用 wordpress 来完成

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

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

解决方案

9GAG 的本质是它有两个图像——一个是动画 GIF，另一个是静态 JPG.

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

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

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

这是一些代码:

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

另外，如果你想要速度，我认为 9GAG 通过预先加载 GIF 来做到这一点，就像这样:

希望这会有所帮助.

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

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

How can i accomplish this with wordpress?

解决方案

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

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.

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.

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.

Here's some code:

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

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>

Hope this helps.

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