progress() starts after page loaded all images

[Nas Kadir]

Hi!
I have some issue in my wordpress theme.
I created a preloader with progress bar and percentage of loaded images.
You can see it here in my codepen.
I used gsap with imagesloaded and it's working perfect, but only in codepen,
you can see it better if you slow down network.

Inside my wordpress theme on localhost I have exactly the same code with ES6 and run script before tag,
and actually it also works, but it seems that my page loaded with all images and only then my script starts run, but since all images has loaded, my progress bar runs in the end of animation form 0% to 100% too fast.

I also checked how images loading by your code:

const imgLoad = imagesLoaded('#page');
imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

And can see how whole page loaded with images and only then in my console I gets all images without any loading in one moment.

I understand maybe it's not correct question, but maybe you met this issue before?
I've tried to correct this for one week, but nothing.
Can you help me, please?