12
How to get the size of a page and how much it was downloaded to calculate the percentage of its load. But I would like to not use any framework, only pure JS.
I really want to try that.
4 answers
8
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 should be loaded and go controlling the load making a Progress bar between the elements but it will be quite flawed. I do not know if it is worth the effort, after all if it takes little time this information has little relevance, if it takes long, there is something wrong on the page.
It is possible that you are thinking of giving a notion of the time remaining to load but this can not control.
Want to try that? Make yourself at home. You have that other. I’m not recommending.
-
Thanks. I managed to do it with Ajax, but only with media, html and plain text. What I wanted was just one more interactivity even on the page, so the user knows that it hasn’t been loaded yet. With Document.readystatechange you can do this interactivity like in Ajax readystatechange, but you can’t get the Kb that was loaded and not the total.
-
Would it then be possible for you to write an answer and mark it as an accepted answer? So your question doesn’t go unanswered and you contribute to the community.
4
Maniero has already answered the question very well.
If you still want to insist... You can spread several scripts around the 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 kind of thing don’t go to heaven when they die. I know some sites like Gmail have a load bar, but even on slower connections it’s more freshness and noise than something useful. Not doing this kind of thing even contributes to the page load faster.
-1
As everyone has said, it’s hard to do that, since you’ll have a lot of performance issues in the future. These page loading is usually done a DOM analysis with Jquery. You pass an ID and when it loads the JQUERY concludes the Progress bar.
I have never tested or done anything like this, but you can try to get the value of ai when all the HTML load the Progress bar comes to an end.
So as I said above, a hint of what you can do is to use Jquery and try something like that or else this here
-1
As many pointed out, what search is not something simple, maybe it is valid if you want to make a screen to download/upload large files.
The first thing you need to do is calculate the size of your HTML and set the Header Content-Length, this way 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();
Still there is a flaw in this approach, you have no way of knowing how long the server will take to process the request.
Your other option, maybe using WebSockets, either using SignalR, SocketIO, Ratchet or something appropriate for the language of your preference.
In this case, the server-side application should inform the client about the progress made.
In short, if you’re not going to use it in something very specific, give up this idea.
Browser other questions tagged javascript html
You are not signed in. Login or sign up in order to post.
Take a look at [tour]. You can accept an answer if it solved your problem. You can vote on every post on the site as well. Did any help you more? You need something to be improved?
– Maniero