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