javascript - 如何禁用页面加载？

Question

我的网站上有一个 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>

Answer 1

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

// 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。