在視點中將圖表餅圖加載到div中

Question

我正在使用easypiechart插件，並且僅當用戶向下滾動到.skills div時，我才希望它加載它。 我正在使用視口插件 。

我已經試過像這樣：

<script src="js/viewport.js"></script>
<script>
    (function(){
    if ($(".skills:in-viewport")){
    jQuery.getScript("js/jquery.easypiechart.min.js").done(function() {
        $('.chart').easyPieChart({
            easing: 'easeOutBounce',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
    });
    };
    });
    </script>

處於視點時不顯示。

謝謝！

Answer 1

您可以在沒有視口插件的情況下進行操作。 您可以使用$(window).height() ，當用戶向下滾動時，請檢查您希望圖表所在的div的距離是否小於滾動距離+ $(window).height() ，如果是，則繪制它。

這是代碼：

var el = document.getElementById('your-div'),
    topDistance = el.getBoundingClientRect().top,
    drawn = false;

function drawPieChart() {
    jQuery.getScript("js/jquery.easypiechart.min.js").done(function() {
        $('.chart').easyPieChart({
            easing: 'easeOutBounce',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
    });
}

function handleScroll() {
    if (document.body.scrollTop + $(window).height() > topDistance) {
        drawn || drawPieChart();
        drawn = true;
    }
}