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

Question

我是Javascript的新手。

我有一个显示报表图形的html。

生成html格式的报告需要5-10秒。

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

Answer 1

默认情况下有一个动画的gif显示，当你的图形加载完成后隐藏它。你的加载函数有函数回调选项吗？如果是，请在此处执行此操作。否则，让低z索引的加载图标与您的图形重叠，为图形提供较高的z索引。哇哇哇。

如果你正在跟踪% loaded，你可以有一个这样的设置：

<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中构建表格时显示该gif。当您完成表的构建后，显示隐藏的div并隐藏加载图标。