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

Posted 2023-05-08

【中文标题】如何使用 wordpress 在点击时播放 GIF（如 9GaG.com）？

【英文标题】：How to play a GIF on click (like 9GaG.com) with wordpress?

【发布时间】：2014-01-21 20:40:54

【问题描述】：

我需要在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，如果再次单击，则停止 gif。如果再次单击，则从头开始播放 gif 文件

我怎样才能用 wordpress 做到这一点？

【参考方案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>

希望这会有所帮助。

【讨论】：

当然，这个解决方案你是对的 [link]***.com/questions/20032860/… [/link] 问题是我不知道如何用 wordpress 实现这个，至少在每个帖子和博客主页中手动实现跨度>

@roquelage 如果你想用 wordpress 实现它，我能想到的唯一方法是以某种方式将一些 javascript 代码注入博客页面（也许通过 wordpress 插件，我不知道）。

脚本应该放在哪里？我已经在非 wordpress 网站上尝试了此代码进行测试，但没有运气。 andaluciabiotecnologica.com/prueba.html 显示静态图片，点击后什么都不做

@roquelage 您可以将脚本放置在您想要的任何位置，只要它包含在博客页面中。然后脚本应该在它周围包含$(function () 和);，因为您希望它在页面加载之后运行，而不是之前。

我尝试了很多次，但我无法让它工作。您的代码似乎很合适，也许我自己做了坏事。这是我的最终代码： andaluciabiotecnologica.com/staticimage.png" />

【参考方案2】：

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

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

然后 your_image.src= your_image.src; gif 将再次运行。

【讨论】：

感谢您的提示。我需要做的就是在我的 img 标签中添加这段代码：onclick="this.src=this.src"