Home » Jquery » javascript – imagesLoaded progress() starts after page loaded all images-Exceptionshub

javascript – imagesLoaded progress() starts after page loaded all images-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

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 </body> 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 this 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.

Maybe someone met this issue before?
Can you help me, please?

How to&Answer: