Не работает event load во vue?

Question

[Марк Ешкилев]

Почему скрипт срабатывает раз через раз? нормально срабатывает только когда делаю полную перезагрузку сайта, а потом снова работает как попало

import { onMounted } from 'vue';
onMounted(()=>{
    window.addEventListener('load', () => {
        const observer = new IntersectionObserver( ( entries ) => {
            entries.forEach( ( entry ) => {
                if ( entry.isIntersecting ) {
                    let target = entry.target;
                    target.classList.add( target.getAttribute( 'data-animation' ) + "-active" );
                    setTimeout(() => {
                        target.classList.remove( target.getAttribute( 'data-animation' ) + "-active" );
                        target.removeAttribute( 'data-animation' );
                    }, 1000);
                }
            })
        });

        const hiddenElements = document.querySelectorAll( '[data-animation]' );
        hiddenElements.forEach( ( el ) => observer.observe( el ) );
    })
})

Answer 1

[Антон Антон]

не надо цепляться к window.load, все действия можно делать в mounted. ну и отлеплять событие в deforeUnmount.
Ну и дергать класслисты и атрибуты напрямую, а менять данные - это прям фуфуфу

Comments

[Марк Ешкилев]

а чем тогда можно заменить window.load?

[Антон Антон]

Марк Ешкилев, так зачем к нему цепляться? в onmount нормально все и так

[Марк Ешкилев]

Антон Антон, это да, но так как у меня этот скрипт делает анимации, то мне нужно дождаться пока все изображения будут загружены в браузер клиента и только потом воспроизводить анимации