How to get page load percentage?

Question

How to get page load percentage?

Navigation

#1 by (8 votes)
#2 by (4 votes)
#3 by (0 votes)
#4 by (-1 votes)

12

How to get the size of a page and how it was downloaded to calculate the percentage of your upload. But I would not use any framework , just pure JS.

I actually want to try this .

javascript html

asked by anonymous 17.11.2014 / 20:37

4 answers

How to extract the path to the file How to create regexReplace for a delimiter?

score 8 · Answer 1

This is virtually impossible. There is nothing ready to do this. The most that is possible is you create a system that knows the size of each file that must be loaded and control the load by doing a progress bar between the elements but it will be well flawed. I do not know if it's worth the effort, after all if it takes too little, this information has little relevance, if it takes too long, something is wrong on the page.

It is possible that you are thinking of giving a sense of the time that is lacking to load but this can not control.

Want to try this ? Feel free. You have this one . I'm not recommending it.

score 4 · Answer 2

Maniero already answered the question very well.

If you still want to insist ... You can spread several scripts per page. As follows:

<body>
    <div><!-- Inicialize seu contador aqui --></div>
    <script type="text/javascript">
        // Aqui você manipula o contador para contar 0%.
    </script>
    <!-- Aqui vem bastante conteúdo -->
    <script>
        // Mude o contador para, por exemplo, 10%.
    </script>
    <!-- Mais conteúdo... -->
    <script>
        // 20% agora.
    </script>
    <-- Já deu pra ver onde isso vai parar, né? -->
    <script>
        // Ok, vamos dar um 100% aqui.
    </script>
</body>

Just remember that programmers who do this sort of thing do not go to heaven when they die. I know that certain sites like GMail have load bars, but even at slower connections this is more freshness and noise than something useful. No do this kind of thing until it helps the page load faster.

score 0 · Answer 3

As many have pointed out, what you are looking for is not something simple, it may be valid if you want to make a large file download / upload screen.

The first thing you need to do is to calculate the size of your HTML and set Header Content-Length , so you could use the following script:

var req = new XMLHttpRequest();   
req.onprogress = function(evt) 
{
    if (evt.lengthComputable) 
    {  
        var progress= (evt.loaded / evt.total) * 100; 
    } 
};
req.open('GET', 'test.php', true);  
req.onreadystatechange = function (aEvt) {  
    if (req.readyState == 4 && req.status == 200) 
    {  

    }  
};  
req.send();

There is still a flaw in this approach, you have no way of knowing how long the server will take to process the request.

Your other option may be using WebSockets , either using SignalR , SocketIO , Ratchet or something appropriate for the language of your choice.

In this case, the server-side application should inform the client of the progress made.

In short, if you're not going to use something very specific, give it up.

score -1 · Answer 4

As everyone has said, it is difficult to do this, since you will have a lot of problem with performance in the future. These page loads are usually done DOM analysis with Jquery. You pass an ID and when it loads JQUERY completes the progress bar.

I've never tried it or done anything like it, but you can try to get the value there when all HTML loads the progress bar comes to an end.

So as I said above, one tip of what you can do is to use Jquery and try something like this or this here