javascript - 使 Gif 文件在用户滚动时播放，然后停止

Question

我在浏览时发现了这个，它在悬停时播放和停止了礼物:

http://docs.embed.ly/docs/tutorial-play-and-stop-gifs

我想保留此功能，但只在用户滚动该部分时播放一次。我相信 jQuery 航路点可以与它结合来实现这一点，但我的 JS 专业知识无法将两者结合起来。

jQuery 航路点 https://github.com/imakewebthings/waypoints

我相信开始的 HTML 结构示例应该是这样的:

<div class="gifs row small-up-4">
  <div class="column"><a href="http://guycodeblog.mtv.com/wp-content/uploads/clutch/2012/06/CinChallenge-GuyLG.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/ObJN1.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://4.bp.blogspot.com/-6ocKfcpNm3U/UVnqv4Fr2iI/AAAAAAAALLY/Iq6asnzRM6Y/s1600/scratch-post.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/dBbTo5S.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/SxsGK.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://cdn.gifstache.com/2012/7/10/gifstache.com_323_1341954201.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://gifs.gifbin.com/082009/1249287969_pat_on_the_back_prank.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/zY4nD.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/uun2L.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/vFnd2.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/p5s51.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://weknowmemes.com/wp-content/uploads/2011/12/cat-jumps-off-ledge.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://thechive.files.wordpress.com/2010/06/54zhb1.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://gifs.gifbin.com/082009/1251020499_own-goal-with-face.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://i.imgur.com/lBuP9.gif" target="_blank">&nbsp;</a></div>
  <div class="column"><a href="http://files.myopera.com/mpatricio/albums/7003662/funny-gif-yoga-balls.gif" target="_blank">&nbsp;</a></div>
</div>


.gifs a {
  position: relative;
  display: block;
}

.gif-preload {
  display: none;
}

.gif-loading {
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #fff;
  top: 0;
  left: 0;
}

$.embedly.defaults.key = '1d5c48f7edc34c54bdae4c37b681ea2b';

$('.gifs a').embedly({
  display: function(obj) {
    if (obj.type === 'photo') {

      var $this = $(this);

      // Create the static image src with Embedly Display.
      var src = $.embedly.display.display(obj.url, {
        query: {
          animate: false
        }
      });

      // Add static gif placeholder to the parent
      $this.html('<img class="gif-holder" src="' + src + '" />');

      // Start preloading the actually gif.
      $this.append('<img class="gif-preload" src="' + obj.url + '" />');

      // Create a promise so we can keep track of state.
      $this.data('promise', $.Deferred());

      // Get the element we added.
      var elem = $this.find('.gif-preload').get(0);

      // If the image is not in cache then onload will fire when it is.
      elem.onload = function() {
        $this.data('promise').resolve();
      };

      // If the image is already in the browsers cache call the handler.
      if (elem.complete) {
        $this.data('promise').resolve();
      }
      // Set the static gif url so we can use it later.
      $(this).data('static_url', src);
    } else {
      // remove li if it's not an image.
      $(this).parent().remove();
    }
  }
}).on('mouseenter', function() {
  var $this = $(this);

  // Set the hover state to true so that the load function knows to run.
  $this.data('hover', true);

  // Create a function to load the gif into the image.
  var load = function() {
    if ($this.data('hover') === true) {
      // Remove the loading image if there is one
      $this.find('.gif-loading').remove();

      // Swap out the static src for the actually gif.
      $this.find('img.gif-holder').attr('src', $this.data('embedly').url);
    }
  };
  // Add the load function to the done callback. If it's already resolved
  // this will fire immediately.
  $this.data('promise').done(load);

  // Add a spinner if it's not going to play right away.
  if ($this.data('promise').state() === 'pending') {
    // Add a loading spinner.
    $this.append('<i class="gif-loading fa fa-spinner fa fa-spin"></i>');

    // we need to center it over the image.
    $this.find('.gif-loading').css({
      top: $this.height() / 2 - 20,
      left: $this.width() / 2 - 20
    });
  }
}).on('mouseleave', function() {
  var $this = $(this);

  // Make sure the load function knows we are no longer in a hover state.
  $this.data('hover', false);

  // Remove the spiner if it's there.
  $this.find('.gif-loading').remove();

  // Set the src to the static url.
  $this.find('img.gif-holder').attr('src', $(this).data('static_url'));
});

Answer 1

这不是一个完美的答案，但它会指导您如何实现。

解决方案:每次滚动时，检查屏幕中的 GIFS 并播放它们并停止那些不在屏幕中的。

1) 每次滚动...

简单使用

$(document).scroll(onScroll);

onScroll 函数将在您每次滚动时调用。

2) 检查屏幕中的 GIFS 并播放它们并停止那些不在屏幕中的

要了解 HTML 元素何时出现在屏幕中，您可以前往 "Check if element is visible after scrolling"问题。

例如，基于 this answer我们可以使用:

 /**
 * Is element within visible region of a scrollable container
 * @param {HTMLElement} el - element to test
 * @returns {boolean} true if within visible region, otherwise false
 */
 function isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
 }

最终解决方案

结合上面的代码，你可以使用这个:

 function isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
 }

function animateGifsInScreen() {
    $('.gifs a').each(function(index, el) {
      if(isScrolledIntoView(el)) {
        $(el).trigger('mouseenter');
      } else {
        $(el).trigger('mouseleave');
      }
    });
}

$(document).scroll(animateGifsInScreen);

我在做什么:每次滚动时，我都会遍历所有 gif 并根据它们是否在屏幕上播放/停止它们。对于播放/停止，我只是分别触发 mouseenter/mouseleave。

这可能不是您的案例的理想解决方案，但我很确定它会引导您找到正确的答案。

有一个样本:https://jsfiddle.net/e8av59g2/ (它有一个错误，你必须至少滚动一次才能让它工作呵呵)。