Website Content load, Progress bar

Question

I have an issue in website loading progress bar. I am using below script for progress bar but its not working perfect in Web server www.example.com, website is hosted live in webserver but the issue is when I open the site the progress bar starts after a while.

How can I start progress bar as I open a website?

Thanks.

$(window).load(function(){
    var width = 100,
    perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
    EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
    time = parseInt((EstimatedTime/1000)%60)*100;

    // Loadbar Animation
    $(".loadbar").animate({
      width: width + "%"
    }, time);

    // Loadbar Glow Animation
    $(".glow").animate({
      width: width + "%"
    }, time);

    // Percentage Increment Animation
    var PercentageID = $("#precent"),
        start = 0,
        end = 100,
        durataion = time;
        animateValue(PercentageID, start, end, durataion);

    function animateValue(id, start, end, duration) {

      var range = end - start,
          current = start,
          increment = end > start? 1 : -1,
          stepTime = Math.abs(Math.floor(duration / range)),
          obj = $(id);

      var timer = setInterval(function() {
        current += increment;
        $(obj).text(current + "%");
          //obj.innerHTML = current;
        if (current == end) {
          clearInterval(timer);
        }
      }, stepTime);
    }

    // Fading Out Loadbar on Finised
    setTimeout(function(){
      $('.preloader-wrap').fadeOut(300);
    }, time);

});

score 1 · Answer 1 · edited May 23 '17 at 11:54

Try using $(document).ready(function(){ instead of $(window).load(function(){

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

Credits to Guffa for answering this question

So it's not waiting for the images, etc. are loaded. Only for the HTML document, which is loaded pretty fast. Your code should look like this then:

$(document).ready(function(){
   // all your other code    
});

Edit: Try using this code:

$(document).ready(function(){
  var width = 100,
      perfData = window.performance.timing,
      EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
      time = parseInt((EstimatedTime/1000)%60)*100;

  $(".loadbar").animate({
    width: width + "%"
  }, time);

  $(".glow").animate({
    width: width + "%"
  }, time);

  var PercentageID = $("#precent"),
      start = 0,
      end = 100,
      durataion = time;
      animateValue(PercentageID, start, end, durataion);

  function animateValue(id, start, end, duration) {

    var range = end - start,
        current = start,
        increment = end > start? 1 : -1,
        stepTime = Math.abs(Math.floor(duration / range)),
        obj = $(id);

    var timer = setInterval(function() {
      current += increment;
      $(obj).text(current + "%");
      if (current == end) {
        clearInterval(timer);
      }
    }, stepTime);
  }

  $(window).load(function(){
    $('.preloader-wrap').fadeOut(300);
    $('.wrap').fadeIn(300);
  });
});

The only condition to get that to work, is that you put all your content inside the .wrap div

But i have also an images at website , its working perfect for Html contents but , how to use this for images ? — Muhammad Sami, May 18 '17 at 08:43
I guess you got your code from this [codepen](http://codepen.io/ahsanrathore/pen/MwppEB) right? I changed the code a bit. Try out [this codepen](http://codepen.io/tobiasglaus/pen/BROvQQ). — petersmith, May 18 '17 at 08:48
yeah i got this Code from here , but its not working perfect in my side , when i use this code with .load function its work as , as i mentioned above but if i use .ready its work perfect but webpage appear before images load. How can i fix it ? — Muhammad Sami, May 18 '17 at 08:55
It's edit tiiiime :) Try using the code I added to my answer — petersmith, May 18 '17 at 08:58

Website Content load, Progress bar

1 Answers1