页面加载时需要显示进度条

Question

我是Javascript的新手。

我有一个显示报告图表的HTML。

报告在html中生成需要5-10秒。

我想在报告生成之前显示进度条。

Answer 1

默认情况下有动画gif演示，当你的图表完成加载然后隐藏它。你的加载函数是否有函数回调选项？如果有，请在此处执行此操作。 否则，让具有低z-index的加载图标与图形重叠，为图形提供更高的z-index。 vwalah。

如果您正在跟踪％loading，则可以进行如下设置：

<div id='progress-bar-total'>
   <div id='progress-bar-percent'></div>
</div>

持续调用一个类似这样的函数：

function updateProgress(bytesRead, bytesTotal){
   var current = (bytesRead/bytesTotal) + "%";
   $("#progress-bar-percent").css("width", current);
}

Answer 2

您可以添加带背景图像的div作为加载程序图像。

在加载中显示此div并隐藏图形。加载图形后隐藏加载器div并显示图形

Answer 3

如果您是javascript的新手，我不会尝试取得进度条。我用一个简单的工作图标来吸引你。使用从http://www.ajaxload.info/创建的动画gif，并在隐藏div中构建表格时显示。完成构建表后，显示隐藏的div并隐藏加载图标。

Answer 4

我不确定您是否可以仅使用JavaScript实现此目的，但您可以检查this script，检查是否已加载所有图像，显示进度条。 或者，正如其他人所说，您可以使用加载页面后隐藏的加载gif（make one here）。

我在使用Flash时只看到了很棒的进度条，但我相信使用这项技术不是你的理由。