Question

在我正在处理的网站上，我们从数据源收集数据，并以SVG的形式将它们呈现在自己的设计元素中。 SVG文件重命名为.php，以便从数据源插入动态数据。

然后，我正在使用inview javascript来初始化一个函数，该函数动画来自源的数据，从0到它们的实际值。但是，我注意到，当有很多元素运行animate函数时，浏览器会有点沉重。

是否有更聪明的方法可以做到这一点？我并没有真正挖掘它，因为它并没有那么糟糕。我刚刚注意到滚动重新绘制区域时的滞后。

这是我的js代码：

    $('.inview article').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
          if (isInView) {
            // element is now visible in the viewport
            if (visiblePartY == 'top' || visiblePartY == 'both' || visiblePartY == 'bottom') {
                var $this = $(this);
                var element = $($this);


                $this.addClass('active');
                reinitializeText(element);
                $this.unbind('inview');

              // top part of element is visible
            } else if (visiblePartY == 'bottom') {
            } else {
            }
          } else {
          }
        });

function reinitializeText(element) {

    var svg = element.find('svg');  
    var children = svg.children('.infographics_svg-text');

    // If there is no class in svg file, search other elements for the class
    if (children.length == 0) {
        var children = element.find('.infographics_svg-text');
    }

    children.each(function (){
        var step = this.textContent/100;
        var round = false;

        if (this.textContent.indexOf('.') !=-1) {
            round = true;
        }

        animateText(this, 0, step, round);
    });
}

function animateText(element, current, step, round) {
    if (current > 100) return;
    var num = current++ *step;

    if (round) {
        num = Math.round((num)*100)/100
    } else {
        num = Math.round(num);
    }

    element.textContent = num;
    setTimeout(function() {
        animateText(element, current, step, round);
    }, 10);
}

编辑：由于从源接收的数据值不同（从低数字到大数字），动画的速度增加，因此它不会永远持续

Javascript - 如何在动画整数时提高性能？

0 个答案: