Javascript function 未在页面加载时加载

Question

I have an animation on my page and the animation only works when I scroll, but I want to run the animation on page load.

The function code is as following:

window.addEventListener("scroll", function () {                      
      var scroll = window.pageYOffset || document.documentElement.scrollTop;
      var elTop = el.getBoundingClientRect().top + scroll - document.documentElement.clientHeight;
      var elBottom = el.getBoundingClientRect().bottom + scroll;
           if ((el.getAttribute('data-effect') === 'false') && (scroll > elTop) && (scroll < elBottom)) {
                        el.setAttribute('data-effect', 'true');
                        if (!notVisible()) {
                            initVisualAnimation();
                        }
                    }               
             }

Answer 1

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

You have added scroll event.. Call the code on page load

Answer 2

You can make a function, and call it on page load.

<script type="text/javascript">
    function Animation_Scrolling(){
        var scroll = window.pageYOffset || document.documentElement.scrollTop;
        var elTop = el.getBoundingClientRect().top + scroll -document.documentElement.clientHeight;
        var elBottom = el.getBoundingClientRect().bottom + scroll;
        if ((el.getAttribute('data-effect') === 'false') && (scroll > elTop) && (scroll < elBottom)) {
            el.setAttribute('data-effect', 'true');
            if (!notVisible()) {
                initVisualAnimation();
            }
        }
    }
    window.onload = Animation_Scrolling;
</script>