我的网站上有一个SVG动画,该动画位于页面中间,当我进入网站时,页面加载和SVG动画会自动绘制图像,所以我该怎么做SVG动画向下滚动时加载?

<script type="text/javascript">

    (function(){

        document.onreadystatechange = () => {

            if (document.readyState === 'complete') {

                /**
                * Setup your Lazy Line element.
                * see README file for more settings
                */

                let el = document.querySelector('#case');

                let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":4.6,"strokeOpacity":1,"strokeColor":"#2ECC70","strokeCap":"square","delay":320});
                myAnimation.paint();

                let el1 = document.querySelector('#clients');

                let myAnimation1 = new LazyLinePainter(el1, {"ease":"easeLinear","strokeWidth":2.6,"strokeOpacity":1,"strokeColor":"#2ECC70","strokeCap":"square","delay":210});

                myAnimation1.paint();
            }
        }

    })();

</script>

最佳答案

当用户向下滚动时,可以在滚动事件处理程序中加载它

// jquery solution
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (lastScrollTop != 'loaded' && st > lastScrollTop){
            let el = document.querySelector('#case');

            let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":4.6,"strokeOpacity":1,"strokeColor":"#2ECC70","strokeCap":"square","delay":320});
            myAnimation.paint();

            let el1 = document.querySelector('#clients');

            let myAnimation1 = new LazyLinePainter(el1, {"ease":"easeLinear","strokeWidth":2.6,"strokeOpacity":1,"strokeColor":"#2ECC70","strokeCap":"square","delay":210});

            myAnimation1.paint();
   }
   lastScrollTop = 'loaded';
});


第一次用户在页面上向下滚动时,这应该开始加载svg。

关于javascript - 如何禁用页面加载?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57920903/

10-16 18:53
查看更多