How to make a preloader on the site in%?

Question

JavaScript

Greetings!
Maybe someone made a preloader on the site that really displays the percentage of loading of the entire site? and not just worth a delay of a few seconds after loading all the js.
There is an idea to measure how long it takes to download one file from the server and then, based on this, calculate the time of the animation itself, but in my opinion this is still a crutch ...

Answer 1

demonstration of mockups, a lot of images that are very high resolution for retina

Load images with js (lazy load). Let the whole page be 10%, then each picture uploaded will be 90% / n-image. So update the status after each picture.
But initially the approach is somehow strange. Are you making the client wait for all the pictures to load ? Why not use lazy load? Under each picture, pre-loader and as the page loads, change the pre-loader to an image. Have the client look at 1 while the others are loaded.
Well, if it's absolutely 'correct', then make an adequate preview-picture (small size). If he likes it, he will go to the page with a full-size picture

Answer 2

Maybe someone did

I have not met and it is unlikely that there can be a full-fledged solution even in theory
Files come in different sizes, can be stored on different servers, can be loaded from the browser cache, so the download speed of 1 file will not tell you anything.
Let's add here asynchronously loaded resources, time for js scripts to fire, etc. As a result, the logic that tracks all this will slow down the site more than anything else.
Many thought about this and always the right way out is to emulate the progress of the download, and not its exact definition.