Calculate & Display percentage of progress of page load

Question

I have a loader which loads when page loads at the starting. I need to show the percentage of completion in it.

My application has lots of jquery and css included in it and it also include a ajax call.

As of now, I have displayed the progress bar when page load starts and hided it when the ajax completed successfully.

Also, I have displayed the percentage but increased it manually using the below code:

function timeout_trigger() {
    $(".progress").css("max-width", p + "%");
    $(".progress-view").text(p + "%");
    if (p != 100) {
        setTimeout('timeout_trigger()', 50);
    }
    p++;
}
timeout_trigger();

The problem here is, before the progress reaches 100, the page loads and the content is displayed and hence the loader is hided in between let say - at 60% - the loader is hided.

I want to calculate the percentage of page load completion (ie. jquery loading time, css loading time etc) dynamically and increase the progress accordingly.

Please help to get through this..

Solution 1

function timeout_trigger() {
   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 50);
   }
   p++;
}
timeout_trigger();

This code will work only when you download 1% per 50ms, if download goes faster - if will fail.

It must be something like this:

var size = file.getsize(); // file size

function timeout_trigger() {
   var loaded = file.getLoaded(); // loaded part
   p = parseInt(loaded / size);

   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 20);
   }
}
timeout_trigger();

To realise method getLoaded() you can use AJAX event onprogress (I hope you are loading files async). Check Monitoring Progress part here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Solution 2

You can use this:

Source: Display a loading bar before the entire page is loaded

Script

<script>
        ;(function(){
          function id(v){ return document.getElementById(v); }
          function loadbar() {
            var ovrl = id("overlay"),
                prog = id("progress"),
                stat = id("progstat"),
                img = document.images,
                c = 0,
                tot = img.length;
            if(tot == 0) return doneLoading();

            function imgLoaded(){
              c += 1;
              var perc = ((100/tot*c) << 0) +"%";
              prog.style.width = perc;
              stat.innerHTML = "Loading "+ perc;
              if(c===tot) return doneLoading();
            }
            function doneLoading(){
              ovrl.style.opacity = 0;
              setTimeout(function(){ 
                ovrl.style.display = "none";
              }, 1200);
            }
            for(var i=0; i<tot; i++) {
              var tImg     = new Image();
              tImg.onload  = imgLoaded;
              tImg.onerror = imgLoaded;
              tImg.src     = img[i].src;
            }    
          }
          document.addEventListener('DOMContentLoaded', loadbar, false);
        }());
    </script>

HTML (At the starting of body or at the end)

<div id="overlay">
            <div id="progstat"></div>
            <div id="progress"></div>
        </div>

CSS

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;
  top:50%;
  transition: 1s;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

Comments

[user3211705]

shall i know whats the 'file' in 'file.getsize()'. I have lots of Js and css files.. how i should get the file size??

[Andrew Evt]

thay are not standart methods, thay must be realised, it's just an example to you, how your task can be done. Read about Monitoring Progress first, and then just realise tham.

[Andrew Evt]

where is file load progress here?

[Anshul Mishra]

The code will populate a overlay on site and there will be a progress bar for the whole content of site, that will be fadeout when site has been complete loaded. you can see a working example here: hestawork.com/playfer/public/home

[Anshul Mishra]

@Roko C. It might be copied from there, because I have used that about a year ago in my project, so I do not remember from where I have get this code so I have just provided the code that I have used. I have shared the link of my project in which it is implemented.

[Anshul Mishra]

I have updated the answer with the link of that answer