ReadyStateChange after all DOM Elements are create, else many SVG animation?

Question

I have many SVG animation bodymovin.load, so i need to create preloader with persent, where persent every img in all animation

All work is ok, BUT document.addEventListener('DOMContentLoaded', () => { starts before all image svg create at DOM, for example in first animation load svg 60 images, in second 367, and preloader see only 60 images

It's preloader

document.addEventListener('DOMContentLoaded', () => {

    const mediaFiles = document.querySelectorAll('image');
    console.log(mediaFiles)
    let i = 0

    Array.from(mediaFiles).forEach((file, index) => {
        file.onload = () => {
            i++

            percents.innerHTML = ((i * 100) / mediaFiles.length).toFixed(1)

            if(i === mediaFiles.length) {
                preloader.classList.add('preloader-hide')
                percents.innerHTML = 100
            }
        }
    })
})

It's animations

const ramaoknaData = { 
    container: document.getElementById('ramaokna-container'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: '/ramaokna.json'
};
const ramaoknaAnim = bodymovin.loadAnimation(ramaoknaData);