网站内容加载，进度条

Question

我有一个问题，在网站加载进度条。我正在使用下面的脚本进度条，但它不是完美的工作在网络服务器www.example.com，网站是托管在网络服务器的生活，但问题是当我打开网站的进度条启动一段时间后。

如何在打开网站时启动进度条？

谢谢。

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

});

Answer 1

尝试使用$(document).ready(function(){而不是$(window).load(function(){

ready事件发生在加载完文档之后，而onload事件发生在所有内容(例如图像)也加载完之后。ready事件的目的是在文档加载后尽可能早地发生该事件，以便向页面中的元素添加功能的代码不必等待所有内容load.Credits到Guffa以响应this question

因此，它不需要等待图像等被加载。只适用于加载速度非常快的HTML文档。那么你的代码应该是这样的：

$(document).ready(function(){
   // all your other 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);
  });
});

要实现这一点，唯一的条件是将所有内容放在.wrap目录中