我试图只在它从顶部或底部进入视口时播放gif滚动，否则会显示静态图像。这是到目前为止的代码，但是没有显示gif。我正在使用https://github.com/rubentd/gifplayer和https://github.com/customd/jquery-visible尝试实现此结果。
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
margin:0;
padding:0
}
body:before{
content:"";
width:100%;
height:100%;
display:block;
}
body:after{
content:"";
width:100%;
height:100%;
display:block;
}
</style>
<link rel="stylesheet" href="http://rubentd.com/bower_components/jquery.gifplayer/dist/gifplayer.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://rubentd.com/bower_components/jquery.gifplayer/dist/jquery.gifplayer.js"></script>
<script src="http://opensource.teamdf.com/visible/jquery.visible.js"></script>
</head>
<body>
<section>
<h2>Play within view only:</h2>
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</section>
<script>
$('#element').visible( function(){
$('.gifplayer').gifplayer();
});
</script>
</body>
</html>
最佳答案
您的解决方案无效，因为此visible函数不接受任何回调。
这是工作示例。您必须添加滚动事件侦听器并以编程方式播放或停止gif：
CSS（必要时，gifplayer添加position: absolute）：
.gif {
position: relative;
}
HTML（由于上述原因添加了容器）：
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
JS，具有播放或停止逻辑的工作滚动事件侦听器：
$('.gifplayer');
$('.gifplayer').gifplayer();
$gifs = $('.gif');
$gifs.each(function (i, gif) {
$(gif).data('isPlaying', false);
});
$(window).scroll(function () {
$gifs = $('.gif');
$gifs.each(function (i, gif) {
$gif = $(gif);
if ($gif.visible(true)) {
if (!$gif.data('isPlaying')) {
$gif.find('.gifplayer').gifplayer('play');
$gif.data('isPlaying', true);
}
if ($gif.find('.gp-gif-element').length > 1) {
$gif.find('.gp-gif-element').first().remove();
}
} else {
if ($gif.data('isPlaying')) {
$gif.find('.gifplayer').gifplayer('stop');
$gif.data('isPlaying', false);
}
}
});
});