CODEWITHSUNDEEP
javascripthtmlcss
Muhammad Sami
Muhammad Sami

Reputation: 3

Website Content load, Progress bar

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);

});

Upvotes: 0

Views: 562

Answers (1)

petersmith
petersmith

Reputation: 11

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

Upvotes: 1

Related Questions