Home javascript How to make a page loading indicator in%?

How to make a page loading indicator in%?




I used Google, the request was like in the headline, but in the heap of articles I found, I could not find a script that would reflect the page loading process.

What method is used to track whether the page is loaded or not, its state?
I just want to find out if there is a way to track the percentage of it loaded, and I can tie it up visually and in css.

It is clear that you can make a stub that will hang for 4 seconds and load from 0 to 100%, but if the Internet is bad and the download will take 4 times longer.

I will be grateful for the ready-made solution (strip from 0-100%)

Answer 1, authority 100%

As for stubs, they are implemented as looped animations just so that there is no explicit end.

As for the real loading indicator, personally I know only one way –

  • load everything with XMLHttpRequest and use its progress event.

And the most important thing to remember is that not all people like the Aria group. I mean, not everyone can appreciate the complexity of the implementation of a real loader and many may not even like it. Moreover, we must not forget that there are applications that really need a loader, and there are those in which it is absolutely impossible to use it. It is more important for the user to see the content for which he comes as quickly as possible, and not the progress of the download.

UPD: 0.0.1

Regarding the stub … To show the stub only until the page is fully formed, use events.

If you want the user to see the generated page as quickly as possible, use the DOMContantLoaded event, which is sent when all scripts are loaded and the dom is fully formed so that you can already refer to it. The only thing that does not have time to load is the link images, which are indicated in the html markup. This is suitable in 90% of cases, in which a beautiful plug is put in their place, signaling that there will be images soon.

In cases where the image is part of the application, that is, as in the case of the background on the main page, use the load event, which is sent when the scripts are loaded, dom formed and all pictures loaded.

Separately, it should be said that scripts of js libraries are added at the end of the body block, and document is subscribed to the event.

Answer 2

It depends on how the page is loaded:

  • If PAGE ITSELF is loading : update progress bar for loading individual components : scripts, styles, content . An example implementation: add a change in the loading step to the execution of each load module:

    var step = 0; // number of steps performed
    var total_step = 0; // number of steps in total
    var width = 100 // width of the progress bar when it is full
    function initJS () {
      step + = 1;
      ... processing ...
      total_step + = 1;
    function initSomethingElse () {
      step + = 1;
      ... processing ...
      total_step + = 1;
    function updatePBar () {
      $ ('# somePBar'). css ('width', total_step / step * width + 'px'); // set the width of the progress bar from the number of steps performed
    function initAll () {
      setInterval (updatePBar (), 100); // update the progressbar every 0.1 second
      initJS ();
      initSomethingElse ();
      init ...
    initAll ();

  • If REQUEST FROM THE SERVER is loaded: update the progress bar via ajax , there are also a lot of methods there. ATM I myself am looking for a solution to this issue, there are a couple of developments in my head, but this is if we load content on the page after loading the main page, and loading content through the server. I can voice it, if you have the second method, we will think together.

  • Programmers, Start Your Engines!

    Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

    Recent questions