Is it possible to check how many bytes got loaded in HTML Page? If not, then can anyone explain how these percentage preloaders work in html pages or tell if they are just an illusion for users?

I want to create a 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.

Is it possible to check how many bytes got loaded in HTML Page? If not, then can anyone explain how these percentage preloaders work in html pages or tell if they are just an illusion for users?

I want to create a 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.

• javascript
• jquery
• html
• ajax

• all the info you need is in the "network" tab in Developer Tool like FireBug or Inspector – josephnvu Commented May 26, 2014 at 9:23
• This has been discussed here : superuser./a/333796/154624 – Kazekage Gaara Commented May 26, 2014 at 9:24
• Look here: stackoverflow./questions/18981909/… – Vova Lando Commented May 26, 2014 at 9: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 Commented May 26, 2014 at 9:36
• @Konvivial, is it worked on not? – cracker Commented Aug 9, 2014 at 6:47

2 Answers 2

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";

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.