Question

我在网站加载进度条中遇到问题。我在下面的脚本中使用进度条，但它在Web服务器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(){

加载HTML文档后发生ready事件，   onload事件发生的时间晚于所有内容（例如图片）   也已被加载。

ready事件的目的是   它应该在文档加载后尽早发生，所以   为页面中的元素添加功能的代码不会   必须等待所有内容加载。

对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 div

中

网站内容加载，进度条

1 个答案: