Getting downloaded size of HTML+JS page in javascript

Question

I have an HTML+JS+CSS page with known size.

During page load, I wanna know how much bytes have been downloaded by browser. Is there any way?

(In fact, I want to know that just to show user a meaningful progress bar. i.e. progress bar advances by amount of bytes being downloaded.) Thanks

There is in modern browsers if you load by XHR, otherwise not that I'm aware of. — Alexander O'Mara, Dec 31 '15 at 18:40
Maybe try using [PACE](http://github.hubspot.com/pace/docs/welcome/)? — Kevin Ji, Dec 31 '15 at 18:40
You could download a small "loader" page which uses XHR to load the actual page. — John Hascall, Dec 31 '15 at 18:50
I'm aware of Pace.js and other similar JS libraries. But my question is WHEN to increment progress bar. My web page is relatively large and i wanna show user a meaningful MESSAGE (by progress bar) to wait. — ALalavi, Jan 01 '16 at 05:10

score 0 · Answer 1 · answered Dec 31 '15 at 19:27

0

If I were you, I send pages size to client with Json object. Then in the client measure memory usages. By minus these sizes, you can estimate downloaded size.

answered Dec 31 '15 at 19:27

Shaho Amini

390
4
11

look at this link http://stackoverflow.com/questions/2530228/jquery-or-javascript-to-find-memory-usage-of-page – Shaho Amini Dec 31 '15 at 19:30

Venkat.R · Answer 2 · 2015-12-31T19:06:37.553

-1

Use fakeLoader.js which need jQuery Library.

JS Code:

$(document).ready(function() {
    $(".fakeloader").fakeLoader({
        timeToHide: 1200,
        bgColor: "#2ecc71",
        spinner: "spinner1"
    });
});

HTML Code:

<link rel="stylesheet" href="css/fakeLoader.css">
<div id="fakeLoader"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://joaopereirawd.github.io/fakeLoader.js/demo/js/fakeLoader.min.js"></script>

Demo URL: http://joaopereirawd.github.io/fakeLoader.js/demo/demo1.html

edited Dec 31 '15 at 19:06

answered Dec 31 '15 at 18:46

Venkat.R

7,420
5
42
63

And how will you show a meaningful progress bar with this? – Alexander O'Mara Dec 31 '15 at 18:47
1

BTW, I believe that "Immediately-Invoked Function Expression" is preferred over the less accurate "self executing function". See http://benalman.com/news/2010/11/immediately-invoked-function-expression/ – John Hascall Dec 31 '15 at 18:48
In plain JS, this will be solution. in jQuery, we have document.ready ! – Venkat.R Dec 31 '15 at 18:49
2

I agree with @AlexanderO'Mara -- I don't see how this shows a loading progress bar. – John Hascall Dec 31 '15 at 18:51
2

But how will you know what values to set on the progress bar? They mentioned using known files sizes, but asked how they could determine the current download progress. – Alexander O'Mara Dec 31 '15 at 18:52
1

The progress bar would need to be updated by the page and brings the OP back to the initial question of how to get updates on the status of a page load. The OP wasn't asking how to run code when the page is loaded but to get status updates during page load so he can provide a status bar. – scrappedcola Dec 31 '15 at 18:54
My Earlier answer was an idea not the total solution. right now shared the jQuery Plugin which does everything what is required. – Venkat.R Dec 31 '15 at 19:07
@AlexanderO'Mara, Let us know your views – Venkat.R Dec 31 '15 at 19:20

Getting downloaded size of HTML+JS page in javascript

2 Answers2