-3

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. :)

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
purefusion
  • 943
  • 1
  • 15
  • 23
  • Are you confused about how they animate it or how they actually load data? – Waleed Khan May 16 '14 at 18:44
  • How they load and measure the loading of the page (data). I know how they animate it. – purefusion May 16 '14 at 18:45
  • this might help they break it down pretty well http://www.entheosweb.com/tutorials/css/preloader/default.asp – Zeeba May 16 '14 at 18:46
  • I'm not interested in a generic "loading" graphic, I want an actual preloader that measures progress with an actual value. – purefusion May 16 '14 at 18:48
  • Right. All you have to do is get said value, which you already seem to know how to do. – Kevin B May 16 '14 at 18:48
  • When I've used the image onLoad() approach, the progress is too jumpy (jumps from say 24% to 85% then 100% at a fast rate, even with cache cleared). A bunch of sites, including this one seem to have nice smooth progress meters. – purefusion May 16 '14 at 18:50
  • The more points in your data, the smoother it will appear. I see no reason to have a progress loader to begin with. If your page has such a large number of assets that you need to use a preloader to keep your users from getting bored, you need to re-think the design or the implementation of the design. Obviously that's just my opinion. I can however see having one on an image slider or similar. – Kevin B May 16 '14 at 18:50
  • As sites are growing in complexity, this is a useful tool for only these complex sites. Regular sites, I'm with you 100%. I'm only talking complex sites. – purefusion May 16 '14 at 19:27

1 Answers1

0

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.

Dayan Moreno Leon
  • 5,357
  • 2
  • 22
  • 24