Imagine that we have a website (SPA), all pages are loaded with Ajax, for example, we use history api. Is it possible, somehow, to show the user page load progress? It is not some kind of animation, but real data. An example of what I mean is the red download bar, at the top, on youtube.com. I do not think that there is real progress, but still, I want to hear ideas, despite how stupid this idea is. That's all, considering what's on the nodejs or php backend. As I did (but it turned out just faykoprogressbar, but it looked beautiful):

  1. When the user clicks on the link, the progress bar begins to fill, the animation speed at this stage is equal to max. time waiting on the server in accordance with the width of the progress bar itself.

  2. If the answer came, then quickly, smoothly, fill the progress bar to the end (300ms for example).

  3. If there is no answer, then we wait for an error about the expiration of the time-out and hide the progress.

All this is tied to time, as mentioned above - it looks good, well, just like it was done on YouTube. But I wonder if it is possible to show real data, up to the size of the loaded page and the download speed right on this progress bar.

  • one
    You are doing everything right, reality is not necessary, this is not a game and there are not gigabytes of shaders loaded. Progressbar on sites is needed in order to show the user that something is happening and the site does not hang. Youtube does the same. And the popular plugin ricostacruz.com/nprogress does the same. - SlyDeath
  • JavaScript will start running after loading some of the content. To control the boot process, you can form most of the dom tree dynamically on the client side. Controlling the process of readiness of the created elements. It turns out that if javascript is disabled and the javascript downloader does not work, the page will appear almost empty. - user184886

2 answers 2

You can get the total size of the downloaded file and how much is loaded at the moment.

In short, like this:

var xhr = new window.XMLHttpRequest(); if ('onprogress' in xhr) { progressBar.parent().show(); loadingPanel.hide(); var last = 0, max = 100 / len; xhr.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = Math.min((evt.loaded / evt.total) * max, max); if (last < percentComplete) { progressWidth += percentComplete - last; last = percentComplete; progressBar.width(progressWidth + '%'); } } }, false); }

Once upon a time on a similar topic wrote an article on Habré: maybe it will help

    I use to display the loading process karinka, because it is the heaviest on the site, i.e. we select all the pictures on the site

     document.querySelector('*') if img

    Then I use one of the preloading checker libraries, for example, this https://github.com/CreateJS/PreloadJS And then we just output the load percentage, we get the actual download data.