Geek Answers Handbook

Can I check how many bytes are loaded in an HTML page?

Can I check how many bytes are loaded in an HTML Page ? If not, can someone explain how these percentage preloader work on html pages or are they just an illusion for users?

I want to create a pre-loader for my site that has functionality similar to flash pre-loaders . But I can’t figure out how to check if every element of the website is loading or loading.

+3
source share
2 answers

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";
+3
source

Unable to get loading progress for current page.

However, if you download something through AJAX, it is actually quite simple.

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

However, the above will not work in some older browsers - they don't like it when you access xhr.responseText before it is fully loaded.

In later browsers, namely those that support "XMLHttpRequest2", you can use the progress event and related properties to get progress. More on MDN , but the general idea is to use evt.loaded / evt.total to load fractions.

+3
source

More articles:


All Articles