Javascript 当用户滚动时播放Gif文件，然后停止

我在浏览时发现了这个，它在悬停中播放并停止礼物：

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

jQuery航路点

我相信一个示例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'));
});

.吉法{
位置：相对位置；
显示：块；
}
.gif预加载{
显示：无；
}
.gif加载{
位置：绝对位置；
宽度：40px；
高度：40px；
字体大小：40px；
颜色：#fff；
排名：0；
左：0；
}
$.embedly.defaults.key='1d5c48f7edc34c54bdae4c37b681ea2b'；
$（'.gifs a'）。嵌入({
显示：功能（obj）{
如果（对象类型=='photo'）{
var$this=$（this）；
//创建带有嵌入式显示的静态图像src。
var src=$.embedly.display.display（obj.url{
查询：{
动画：错误
}
});
//将静态gif占位符添加到父级
$this.html（“”）；
//开始预加载gif文件。
$this.append（“”）；
//创造一个承诺，这样我们就可以跟踪状态。
$this.data（'promise'，$.Deferred（））；
//获取我们添加的元素。
var elem=$this.find（'.gif preload'）.get（0）；
//如果映像不在缓存中，则当映像在缓存中时将触发onload。
elem.onload=函数（）{
$this.data（'promise'）.resolve（）；
};
//如果图像已经在浏览器缓存中，请调用处理程序。
如果（要素完成）{
$this.data（'promise'）.resolve（）；
}
//设置静态gif url，以便稍后使用。
$（this）.data（'static_url'，src）；
}否则{
//如果不是图像，请删除li。
$（this.parent（）.remove（）；
}
}
}).on（'mouseenter'，function（）{
var$this=$（this）；
//将悬停状态设置为true，以便加载函数知道如何运行。
$this.data（'hover'，true）；
//创建一个函数将gif加载到图像中。
var load=function（）{
if（$this.data（'hover'）==true）{
//如果存在加载映像，请删除该映像
$this.find（'.gif加载'）.remove（）；
//将静态src替换为实际gif。
$this.find（'img.gif holder'）.attr（'src'），$this.data（'embedly'）.url）；
}
};
//将load函数添加到done回调中。如果已解析
//这将立即开火。
$this.data（'promise'）.done（load）；
//如果无法立即播放，请添加旋转器。
if（$this.data（'promise'）.state（）=='pending'）{
//添加加载微调器。
$this.append（“”）；
//我们需要把它放在图像的中心。
$this.find（'.gif加载'）.css({
顶部：$this.height（）/2-20，
左：$this.width（）/2-20
});
}
}).on（'mouseleave'，function（）{
var$this=$（this）；
//确保load函数知道我们不再处于悬停状态。
$this.data（'hover'，false）；
//如果spiner在那里，请将其移除。
$this.find（'.gif加载'）.remove（）；
//将src设置为静态url。
$this.find（'img.gif holder'）.attr（'src'，$（this.data（'static_url'））；
});

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

解决方案：每次滚动时，检查屏幕上的GIF并播放它们，然后停止屏幕上不存在的GIF

1）每次滚动…

简单使用

$(document).scroll(onScroll);

onScroll

函数将在每次滚动时调用

2）检查屏幕上的GIF并播放它们，阻止屏幕上没有的GIF

要知道HTML元素何时出现在屏幕中，您可以直接提问

例如，根据我们可以使用：

 /**
 * 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);
 }

/**
*元素位于可滚动容器的可见区域内
*@param{HTMLElement}el-要测试的元素
*@如果在可见区域内，则返回{boolean}true，否则返回false
*/
函数为CrolledinToView（el）{
var rect=el.getBoundingClientRect（）；
返回（rect.top>=0）和（rect.bottom=0）和（rect.bottom为什么您需要滑鼠输入的航路点？我需要的是滚动上的航路点，而不是示例中的滑鼠输入。对不起，如果我没有在问题中说得更清楚，那么您希望当滚动到达gif时gif播放一次？是的，gif将在容器div中。我希望当用户滚动到包含gif的区域时gif仅播放一次er gif/在这个gif上这很好，有没有办法让gif在加载一次后停止而不是循环？
 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);