Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calculate & Display percentage of progress of page load

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..

like image 872
user3211705 Avatar asked Nov 20 '15 07:11

user3211705


People also ask

How do we calculate percentage?

How Do we Calculate Percentage? Percentage can be calculated by dividing the value by the total value, and then multiplying the result by 100. The formula used to calculate percentage is: (value/total value)×100%.

How can calculate marks percentage?

Two simple steps give you the percentage of marks. They are: Step 1: Divide the obtained marks by the maxim marks of the test. Step 2: Multiply the result by 100.

What is the full meaning of calculate?

calculate | American Dictionaryto judge the amount or value of something by using information and esp. numbers: [ + question word ] We tried to calculate how fast he was moving when the car crashed. I calculated the total cost to be over $9000.

Does calculate mean multiply?

To work out an answer, usually by adding, multiplying etc. Example: Calculate the cost of 10 apples when each apple costs 0.50.


2 Answers

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;
}
like image 117
Anshul Mishra Avatar answered Sep 29 '22 21:09

Anshul Mishra


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

like image 33
Andrew Evt Avatar answered Sep 29 '22 22:09

Andrew Evt