如何在onClick上播放GIF动画

动画GIF是一种流行的方式，可以形象化一个设计概念（这是我们如何使用CSS创建的后期文字效果的示例）或展示一个简短的视频剪辑。 但是，如果您在同一页面中有太多这些对象，则会偏离用户的关注重点。 对于展示大量GIF的页面，这是个坏消息。

解决方案： 为用户提供静态图片，并且仅在用户单击时允许动画GIF运行 。 在这个简短的教程中，我们将向您展示如何做到这一点。

• 观看演示
• 下载源

入门

首先准备项目文件夹和文件，其中包括：HTML文件，jQuery，最后是我们将在其中编写代码JavaScript文件。 您可以将jQuery链接到CDN或获取副本并将其链接到您的项目目录。 我将样式和CSS留给您想象。 最重要的部分是HTML标记如下：

<figure>
	<img src="img/mobile-wireframe.png" height="300" width="400" alt="Static Image" data-alt="img/mobile-wireframe.gif">
</figure>
<!-- add more images -->

请注意img元素中的其他data-alt属性。 我们在这里存储GIF，以代替最初提供的静态图片。 您可以添加更多图像，也可以通过figcaption元素为每个图像添加标题。

之后，我们将编写将带来魔力JavaScript。 想法是当用户单击图像时提供GIF图像。

JavaScript

首先，我们创建一个函数，该函数将检索我们放置在data-alt属性中的GIF图像路径。 我们将遍历每个图像，并使用jQuery .data()方法执行此操作：

var getGif = function() {
	var gif = [];
	$('img').each(function() {
		var data = $(this).data('alt');
		gif.push(data);
	});
	return gif;
}
var gif = getGif();

如上所述，我们运行函数并将输出保存在变量gif 。 gif变量现在包含页面中图像的GIF路径。

图像预加载

现在，我们遇到了加载问题：在尚未加载GIF的情况下，动画GIF可能无法立即播放（因为浏览器需要几秒钟才能完全加载GIF）。 当GIF图像尺寸较大时，这种延迟会更加明显。

我们需要在页面加载时预加载或同时加载GIF。

// Preload all the GIF.
var image = [];

$.each(gif, function(index) {
	image[index]     = new Image();
	image[index].src = gif[index];
});

现在，打开DevTools，然后转到Network （或Resources ）选项卡。 您会注意到，即使GIF已保存在data-alt属性中，也已经加载。 以下是您需要执行的所有代码。

代码的最后一部分是我们绑定每个用click事件包装图像的figure元素的位置。

该代码将在提供静态图片的src属性和我们最初提供GIF图片的data-alt属性之间交换图片源。

当用户第二次单击时，该代码还将还原为静态图像，从而“停止”动画。

$('figure').on('click', function() {

  var $this   = $(this),
          $index  = $this.index(),
          
          $img    = $this.children('img'),
          $imgSrc = $img.attr('src'),
          $imgAlt = $img.attr('data-alt'),
          $imgExt = $imgAlt.split('.');
          
  if($imgExt[1] === 'gif') {
      $img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
  } else {
      $img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
  }

});

就是这样。 您可以使用样式修饰页面，例如，可以在图像上添加播放按钮，以指示该图像是“可播放的”或GIF动画。

查看演示并在此处下载源。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/on-click-animated-gif/