Question

我只是在从顶部或底部进入视口时尝试播放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>

Answer 1

jquery-visible只是检查在调用.visible()时元素是否可见。当变得可见时，它不会提醒您或运行代码。您可以创建一个滚动事件侦听器，在每个滚动条上调用.visible()，如果它返回true，您可以运行您的gifplayer代码。或者您可以使用Waypoints这样的插件，该插件用于在变为可见的情况下运行代码。

Answer 2

您的解决方案不起作用，因为此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);
            }
        }
    });
});

仅当从顶部或底部进入视口时才播放gif

2 个答案: