Question

我想有一个进度条可以进入我的页面。所以它必须有两个目标，首先尝试加载页面内容，然后在第二个计划中完成10秒后（即使内容尚未加载）。

我做了一个简单的进度条但对我来说老实说不知道它是如何计算时间的：

var progressbar = $( "#progressbar" ),
  progressLabel = $( ".progress-label" );

progressbar.progressbar({
  value: false,
  change: function() {
    progressLabel.text( progressbar.progressbar( "value" ) + "%" );
  },
  complete: function() {
    progressLabel.text( "Complete!" );
  }
});

function progress() {
  var val = progressbar.progressbar( "value" ) || 0;

  progressbar.progressbar( "value", val + 1 );

  if ( val < 99 ) {
    setTimeout( progress, 100 );
  }
}

setTimeout( progress, 3000 );

HTML：

<div id="progressbar"></div>
<div class="progress-label">Loading...</div>

DEMO

目前它不适用于页面的内容。但是如何在页面中加载所有内容之前使其成为工作方式，但无论如何最少需要5秒钟，最多需要10秒才能加载？

Answer 1

进度条无法知道页面的大小以及加载的百分比。

如果你想实现这个，我会建议你的页面中的每个元素都在一个javascript对象，所有的CSS，Javascript和图像。您可以循环并一次将这些附加到DOM中，进度条将指示已加载的总数中有多少文件。

我更喜欢在模式中在页面上加载GIF，然后在加载文档时可以删除加载GIF。

Answer 2

是的，在整个文档加载完毕之前不会触发。

你的模态加载div：

＆LT; div id =“loading”style =“position：absolute; background-color：black; top：0px; right：0px; left：0px; bottom：0px; background-image：url（loading.gif）; background-position：中心;背景重复：无“＆gt;＆lt; / DIV＆GT;

jQuery（页面加载时触发）： $（function（）{$（“＃loading”）。remove（）;}）;

Answer 3

您可以创建一个这样的计时器，在10秒后删除div

var maxTime = 10; / *秒* / var myTime = 0; var myTimer = setInterval（function（）{ 数值指明MyTime ++; if（myTime＆gt; = maxTime）{ myTimer.clear（）; $（ “＃装载”）删除（）。 }

}，1000）;

Answer 4

如果我理解你，你可以尝试这个获取ajax loader http://www.ajaxload.info/。然后我做的是在<body>标记下方添加一个div，其中包含一个类微调器<div class="spinner"></div>。这是班级css .spinner { position:absolute; z-index:99; background:url(../images/loader.gif) 50% 50% no-repeat #000; width:100%; height:100%; top:0; left:0 }。加载器将显示，直到页面加载。

如何设置进度条直到加载内容或最大时间？

4 个答案: