0

I would like to create an accurate page loading bar on a website. One way I could do this would be to load a single script into the page and handle requesting the rest of the resources via the script, measuring the bar as:

the number of loaded resources / number of total resource requests

and update the bar's width each time a new resource finished loading.

This would require me to re-structure my page's code though, and I often find that people here know better ways of doing things. So to save myself the trouble this time:

This very similar question was asked 5 years ago, and I'm unsure if the answer is still accurate

Is there now a standard built-in page size (data size, in bytes) attribute that I can access via JavaScript?

Community
  • 1
  • 1
  • http://stackoverflow.com/questions/4401003/read-size-of-current-document-from-javascript – Bruno Calza Nov 03 '14 at 21:03
  • @BrunoCalza if I just wanted the document size, I could just read the html's character length and convert that to bytes. I'm talking images, scripts, and any asset (all data) currently loaded into the page. –  Nov 03 '14 at 21:11

1 Answers1

0

I don't see how knowing the current page size will help you know how large the other unloaded elements are. And there's no way to know the size of the other elements on the server without asking the server.

Can you you read the file size on the server using a server side language and then build your loading script dynamically? If the other elements don't change frequently, you could hardcode the sizes or have them set by a build script.

Scott Saunders
  • 29,840
  • 14
  • 57
  • 64
  • I could read the total size of the page being loaded from the server, yes. Since all files are served from my server, I could just store an array of the file names involved in any given page type and read the size from those files. –  Nov 03 '14 at 21:09
  • I think that's the way to go. Don't make the browser try to figure out the size of files on the server if the server can easily tell you. – Scott Saunders Nov 03 '14 at 21:26
  • but that doesn't solve the problem. I need to know what portion of the page's resources have been loaded into the *browser* so I can display the percentage of the page loaded as a visual bar. –  Nov 03 '14 at 21:42
  • I don't think you're going to do better than figuring out which files are fully loaded and then calculating the overall percentage based on that. In other words, I don't think you'll get any more granular than full file sizes. Someone else might know a way, but I don't think what you want to do is possible (in any way that wouldn't take an intense amount of work and radically slow down the load time). – Scott Saunders Nov 03 '14 at 21:47