问题描述
我需要在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
我读过这个
这个
播放动画GIF几乎是一个解决方案，但我不知道如何在每个条目中使用wordpress完成这个
I´ve read this Onclick play GIF image with jQuery and start from beginningalso thisHow 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！