我尝试仅在从顶部或底部进入视口(viewport)时播放 gif onscroll，否则显示静态图像。这是我到目前为止得到的代码，但它没有显示 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);
}
}
});
});
关于javascript - 仅当 gif 从顶部或底部进入视口(viewport)时才播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48651139/