4

Is it possible to check how much bytes get loaded in HTML Page?? If not, Can anyone explains how does these percentage preloader works in html pages or they are just illusion for users??

I want to create pre-loader for my website having functionality similar to flash pre-loaders. But can't understand how to check whether each element of website gets loaded or still loading.

Deepu Sasidharan
  • 4,987
  • 8
  • 35
  • 89
Konvivial
  • 99
  • 2
  • 9
  • all the info you need is in the "network" tab in Developer Tool like FireBug or Inspector – josephnvu May 26 '14 at 09:23
  • This has been discussed here : http://superuser.com/a/333796/154624 – Kazekage Gaara May 26 '14 at 09:24
  • Look here: http://stackoverflow.com/questions/18981909/how-to-show-a-running-progress-bar-while-page-is-loading – Vova Lando May 26 '14 at 09:26
  • 2
    Not to demotivate, but till my last project where I just barely managed to get it done was by giving user an illusion. Sad part is its more of an hassle and it worth nothing... Sometime, my progress-bar went directly to 100% from 60% :( . Will definitely bookmark your question , so that I can see a better solution and improve my code. – Shubh May 26 '14 at 09:36
  • @Konvivial, is it worked on not? – cracker Aug 09 '14 at 06:47
  • No....For now I just used the delay and get the stuff done without percentage. – Konvivial Aug 20 '14 at 06:34

2 Answers2

3

It returns the size of the html page in bytes Or you can get the content-length header

var request = new XMLHttpRequest();
request.open('GET', document.location, false);
request.send();
var size = request.getAllResponseHeaders().toLowerCase().match(/content-length: \d+/);
document.getElementById("size").innerHTML = size + " bytes";
cracker
  • 4,858
  • 3
  • 19
  • 39
3

It is not possible to get loading progress for the current page.

However, if you are loading anything through AJAX, it's actually quite simple.

The server will (or at least, should) include a Content-Length header in the response, which you can read (xhr.getResponseHeader("Content-Length")) and you can also read the amount downloaded so far (xhr.responseText.length) and work out a percentage.

However, the above won't work in some older browsers - they don't like you accessing xhr.responseText before it's fully downloaded.

In more recent browsers, namely those that support "XMLHttpRequest2", you can use the progress event and relevant properties to get the progress. More details on MDN, but the general idea is to use evt.loaded / evt.total to get the fraction loaded.

Niet the Dark Absol
  • 311,322
  • 76
  • 447
  • 566