html 嵌入gif_使用jqGifPreview嵌入动画GIF，例如Facebook

Twitter和Facebook每天都有很多人共享动画GIF 。 如果这些都是自动播放的，则它们可能在feed中令人讨厌。

两个网络都通过针对所有GIF的点击预览功能来解决此问题。 这使用户可以通过选择何时开始/停止动画来选择想要查看的动画。

使用jqGifPreview插件 ，您可以将相同的功能引入您的网站。

这个免费的jQuery插件适用于页面上的所有GIF，也可以专门针对您想要的任何GIF。 这是一种很棒的资源，但是设置起来需要一些时间。

暂停的GIF实际上只是页面上显示的动画的一帧 。

不幸的是，此插件不会自动为您从GIF中提取静态图片 。 但是，您可以使用PHP或任何其他后端语言来完成此操作 ，因此只需少量代码，即可实现自动化。

该插件使用data- *属性 存储GIF图像位置 。 用户单击图像后，它将自动加载到图像的src属性中并显示在屏幕上。

简单，有效，绝对是一种整洁的效果！ 您需要的是此插件CSS / JS文件，您可以直接从GitHub中提取该文件。 当然，您也将需要jQuery的副本 。

从那里，您可以像这样设置图像：

<img class="myImg" src="sample_first_frame.png"
data-gif="sample_giphy.gif">

主src属性应包含静态图片 。 您可以构建一个脚本来生成它，也可以为每个GIF手动编辑和上传静态镜头。

data-gif属性包含真实的动画GIF ，如果您定位主图像类 （在本例中为.myImg ），它们将在单击时交换。 现在，您只需要一行jQuery就能使其全部正常工作：

$(".myImg").jqGifPreview();

毫无疑问，这是我本月见过的最酷的jQuery插件之一，并且很容易设置。

您可以通过访问GitHub页面了解更多信息，并在开发人员的网站上托管实时演示预览 。

翻译自: https://www.hongkiat.com/blog/facebook-style-animated-gif-embed/