如何使用 jQuery AJAX 暂停和启动 gif答案

【问题标题】：How to pause and start gif using jQuery AJAX如何使用 jQuery AJAX 暂停和启动 gif
【发布时间】：2017-11-02 01:39:23
【问题描述】：

我是一名学生，我正在尝试在用户单击 gif 时开始、暂停和启动 gif，但是我一直不知道如何添加此单击功能。我知道对象的 gif 版本是 .images.fixed_height.url ，静止图像是 .images.fixed_height_still.url 。如果我尝试像下面的 $(this) 那样追加，我会发现图像是未定义的。我该怎么做？当前，当您单击该类别时会显示 10 个 gif。提前感谢您的帮助。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Giphy</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <style>
    body {
      background-image: url('http://www.efoza.com/postpic/2011/04/elegant-blue-wallpaper-designs_154158.jpg');
      width: 100%;
    }
    button {
      padding: 0 2%;
      margin: 0 2%;
    }
    h4 {
      font-size: 165%;
      font-weight: bold;
      color: white;
    }
    .container {
      background-color: rgba(0, 0, 0, 0.2);
      max-width: 1000px;
      width: 100%;
    }
    .btn {
      margin-top: 2%;
      margin-bottom: 2%;
      font-size: 125%;
      font-weight: bold;
    } 
    .guide {
      padding: 3% 0 0 0;
    }
    .tag-row {
      padding: 3% 0 0 0;
    }
    .category-row {
      padding: 3% 0 ;
    }
    #photo {
      padding-bottom: 3%;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="row text-center guide"><h4>Click a category and see the current top 10 most popular giphy's of that category!</h4></div>
    <div class="row text-center tag-row" id="tags"></div>
    <div class="row text-center category-row">
      <input type="" name="" id="category"><button class="btn btn-secondary" id="addTag">Add Category</button>
    </div>
  </div>

  <div class="container">
    <div id="photo"></div>
  </div>

  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script type="text/javascript">

    var tags = ["dog", "dolphin", "whale", "cat", "elephant", "otter"];

    // Function for displaying movie data
      function renderButtons() {

        $("#tags").empty();

        for (var i = 0; i < tags.length; i++) {
          $("#tags").append('<button class="tag-buttons btn btn-primary">' + tags[i] + '</button>');
        }      

      } 

    // Add tags function // 

    $(document).on('click', '#addTag', function(event) {

      event.preventDefault();

      var newTag = $("#category").val().trim();
      tags.push(newTag);

      $("#tags").append('<button class="tag-buttons btn btn-primary">' + newTag + '</button>');

    });

    // Tag button function //

    $(document).on('click', '.tag-buttons', function(event) {

      // Keeps page from reloading //
      event.preventDefault();

      var type = this.innerText;
      console.log(this.innerText);
      var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + window.encodeURI(type) + "&limit=10&api_key=dc6zaTOxFJmzC";

      $.ajax({
        url: queryURL,
        method: "GET"
      }).done(function(response) {
        for (var i = 0; i < response.data.length; i++) {
      $("#photo").append('<img src="' + response.data[i].images.fixed_height_still.url + '" class="animate">');
      $('.animate').on('click', function() {
        $(this).remove().append('<img src="' + response.data[i].images.fixed_height.url + '" class="animate">');
        console.log($(this));
      }); 
    }   
      });

      $("#photo").empty();

    });
    renderButtons();
  </script>
</body>
</html>

【问题讨论】：

标签： javascript jquery ajax onclick gif

【解决方案1】：

fixed_height 和 fixed_height_still 的区别可以解决问题。如果您仔细观察，URL 的区别仅在于 name_s.gif 和 name.gif。

因此，您可以简单地交换两个图像来创建一个播放器。这就像一场戏剧和停止。不播放和暂停。但在一个小 gif 中，我认为暂停并不重要，停止和暂停看起来很相似。

将类名添加到#photo

 $("#photo").append('<img class="gif" src="' + response.data[i].images.fixed_height_still.url + '">');

控制播放和停止的事件处理程序

$('body').on('click', '.gif', function() {
    var src = $(this).attr("src");
  if($(this).hasClass('playing')){
     //stop
     $(this).attr('src', src.replace(/\.gif/i, "_s.gif"))
     $(this).removeClass('playing');
  } else {
    //play
    $(this).addClass('playing');
    $(this).attr('src', src.replace(/\_s.gif/i, ".gif"))
  }
});

jsfiddle 演示 https://jsfiddle.net/karthick6891/L9t0t1r2/

【讨论】：

这是一个了不起的解决方案！为什么选择 $('body') 而不是 $(document)？
在我的项目中习惯了这种类型。我们在 body 上触发事件。 :-)

【解决方案2】：

你可以使用这个jquery插件http://rubentd.com/gifplayer/

<img class="gifplayer" src="media/banana.png" />

<script>
    $('.gifplayer').gifplayer();
</script>

你可以这样控制

使用这些方法以编程方式播放和停止播放器

$('#banana').gifplayer('play');
$('#banana').gifplayer('stop');

你会在这里找到更多细节https://github.com/rubentd/gifplayer

【讨论】：