CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Konvivial
Konvivial

Reputation: 99

Is it possible to check how much bytes get loaded in HTML Page?

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.

Upvotes: 4

Views: 4553

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

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.

Upvotes: 3

cracker
cracker

Reputation: 4906

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

Upvotes: 3

Related Questions