There are numerous sites out there with loading progress animations that show up while the page is loading. I know about the image onLoad() approach, but it seems that is not the approach taken by some (maybe even most). However, every tutorial out there on HTML5 page load progress preloaders shows the image onLoad() approach.
So my specific question is, how do they control their preloader? How do they load and measure the loading of their data? Or are they faking the loading and just animating the fake progress? If so, why does the progress graphic/page load go much faster on subsequent refreshes?
I dug around in their JS file, and it appears they're using a tweening library and some kind of Blitter() object which implies sprite usage, but that confuses me in correlation to the preloader progress graphic. I couldn't make sense of it.
Anyone care to help me understand exactly what approach they're taking to get their preloader working? Boil it down for me. :)
you have to asynchronously load all your scripts using requirejs or other script loader, same for your images that way you can monitor the progress. and create your custom loading bar. the one they use can be easily implemented by overlapping a png image and a white background div that increases its width on every progress step.