Javascript 网站内容加载，进度条

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

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

谢谢

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

});

尝试使用$document.readyfunction{而不是$window.loadfunction{

ready事件在加载HTML文档后发生， 而当所有内容（如图像）稍后发生onload事件时 也已加载。就绪事件的目的是 它应该在文档加载后尽早发生，因此 向页面中的元素添加功能的代码不会 必须等待所有内容加载。感谢Guffa的回答

所以它不需要等待图像等被加载，只需要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 div中，但是我在网站上也有一个图片，它非常适合Html内容，但是，如何将它用于图片呢？我想你的代码是从这里得到的吧？我对代码做了一点修改。试试看。是的，我从这里得到了这段代码，但它不能正常工作在我这边，当我使用这个代码与.load函数时，它的工作方式与我上面提到的一样，但如果我使用.ready它的工作方式完美，但网页在图像加载之前出现。我如何修复它？编辑时间：试着使用我添加到答案中的代码