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