CODEWITHSUNDEEP
javascriptcsssingle-page-applicationfilesize
DonJuwe
DonJuwe

Reputation: 4563

How to get file size of scripts and stylesheets with javascript

I have a single page application which loads a minified javascript file as well as a stylesheet. While doing so, I want to display a progress bar.

Is it possible to get the file sizes and calculate the value for my progress bar? Or is there another way to do so?

<link rel="stylesheet" href="myPath/myStyles.css" type="text/css">
<script type="text/javascript" src="myPath/myScript.js"></script>

Upvotes: 3

Views: 1493

Answers (1)

Julian Knight
Julian Knight

Reputation: 4923

It is not possible to find the sizes of resources being loaded with the page.

Either you need to load the resources from JavaScript so that you get access to the HTTP headers which contain the size.

Or you need to manipulate the server to send the additional information via another method such as updating a cookie.

I guess there might be a 3rd method whereby you put the size into the file as information such as having a CSS entity such as my-file-size { color:25 } or some such. But you would need a fairly robust workflow to keep that in step.

UPDATE: Forgot a 4th method which would be to do another request for the same resources from JavaScript after the page has loaded. You could just request the headers from the server, you don't need to load the whole resource.

Upvotes: 3

Related Questions