3

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>
DonJuwe
  • 4,477
  • 3
  • 34
  • 59
  • 3
    http://github.hubspot.com/pace/docs/welcome/ – Drops May 22 '15 at 07:23
  • Can you make an ajax call to e.g. a PHP script that will report the information back to your javascript? – some-non-descript-user May 22 '15 at 07:25
  • @some-non-descript-user sorry no php possible – DonJuwe May 22 '15 at 07:31
  • @Drops nice but how can I get the script getting executed before loading my other files? – DonJuwe May 22 '15 at 07:43
  • How big are these resources? It hardly seems necessary to put up a progress bar for something that takes 500-1000ms. If you really want a progress bar, you could put up a fake one that always counted up to 2 seconds or something. –  May 22 '15 at 07:52
  • @torazaburo Since I have users in regions with slower internet connections it will take up to 20 seconds to load my files – DonJuwe May 22 '15 at 07:54
  • In that case, although it's a lot of work, you should consider some kind of dynamic loading solution so initial page load/display is no more than a few seconds. –  May 22 '15 at 07:55
  • @DonJuwe just google it, but pace.js should do that for you out-of-the-box. Here is [similair question](https://stackoverflow.com/questions/18981909/how-to-show-a-running-progress-bar-while-page-is-loading) and here is short [pace.js tut](http://www.1stwebdesigner.com/page-load-progress-bar-pace-js/). Hope it helps. – Drops May 22 '15 at 13:27
  • @Drops yes it does for AJAX calls but not when loading other scripts, stylesheets... – DonJuwe May 22 '15 at 14:45

1 Answers1

3

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.

Julian Knight
  • 4,716
  • 2
  • 29
  • 42