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

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

我读过这个 还有这个 这几乎是一个解决方案，但我不知道如何做到这一点与wordpress在每个条目

9gag.com做得很好；显示预览图像，重新单击gif，并在再次单击gif时停止。如果再次单击，将从一开始再次播放gif

---

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

9GAG的基本功能是它有两个图像——一个是动画GIF，另一个是静止的JPG

在你点击它之前，它显示了JPG文件。单击后，它将GIF加载到相同的

$（“#gifdiv”）。单击（函数（）{
if（$（this）.find（“img”）.attr（“数据状态”）=“静态”）{
$（this.find（“img”）.attr（“src”、“animatedgif.gif”）；
}否则{
$（this.find（“img”）.attr（“src”、“staticgif.jpg”）；
}
});

此外，如果您希望提高速度，我认为9GAG通过预先加载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>

（新建图像（））.src=“animatedgif.gif”；//这将预加载GIF，因此将来的加载将是瞬时的

---

希望这有帮助。

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

您的_image=document.getElementById或您想要获取图像引用的方式。 然后为单击设置事件侦听器

---

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

当然，你是对的，这是一个解决方案[link][/link]问题是我不知道如何用wordpress实现这一点，至少在每篇文章和博客中手动实现homepage@roquelage如果你想用wordpress实现这一点，我能想到的唯一方法就是在博客页面中注入一些javascript代码（可能是通过wordpress插件，我不知道）。脚本应该放在哪里？我在一个非wordpress网站上尝试了这段代码进行测试，但没有成功。它显示了静态图像，但什么也没做onclick@roquelage你可以把脚本放在任何你想放的地方，只要它包含在博客页面中。然后脚本应该包含

$（函数（）{

和

}）

围绕它，因为您希望它在页面加载后运行，而不是之前。我尝试了很多次，但都无法使它工作。您的代码似乎合适，可能我自己做了一些不好的事情。这是我最后的代码：$（'#gifdiv'）。单击（函数（）{if（$（This）。查找（“img”）.attr（“数据状态”）=“static”）{$（This）。查找（“img”）.attr(“src”，”；}else{$（this）.find（“img”）.attr（“src”，”；}）；谢谢你的提示。我所需要做的就是在我的img标签中添加这段代码：

onclick=“this.src=this.src”

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