使用 jQuery 显示进度条
4.74/5 (19投票s)
当在网站上执行耗时操作（例如文件上传等）时，让您的访问者稍微安心，知道正在发生一些事情...
引言
本文介绍如何使用 jQuery 显示加载进度。通常，我们会执行高带宽操作，例如文件上传等。为了让网站用户感到安心，我们需要显示正在发生一些事情。最好的方法是使用 jQuery 在浏览器的客户端区域显示带有覆盖层淡入淡出效果的进度消息。
Using the Code
为了使用 jQuery 显示进度，我使用了两个 .JS 文件。第一个 .JS 文件是从 jQuery 网站下载的最新版本的 jQuery 文件，另一个文件用于进度覆盖层和消息框内容。
接下来是 .CSS 部分，用于设置覆盖层淡入淡出效果和进度消息框样式的样式。使用 GIF 图像可以使进度框更有效。
使用 jQuery 的覆盖层进度可以附加到服务器端 ASPX 控件以及 HTML 控件。例如，ASPX LinkButton、HyperLink、Menu、Button、DropDownList、ListBox 等，以及 HTML Anchor、Select、Input 等。
必须讨论的关于 ‘progress.js’ 文件（包含在演示中）的重要部分
//These are the top few lines of progress.js file
$("BODY").append('<div id="processing_overlay"></div>');
$("BODY").append(
'<div id="processing_container">' +
//'<div id="processing_title">This is title</div>' +
'<div id="processing_content">' +
'<img style="width: 215px; height: 25px;"
src="img/googleballs.gif" />' +
'<br><br>Please wait' +
'</div>' +
'</div>');
第一个带有 id processing_ovelay 的 division 是完整进度上下文的容器，包括淡化的颜色。如果需要更改覆盖层的颜色，请转到 *.css 文件 --> 查看此 division 的样式 --> 更改 CSS 属性 background-color 的值。要使覆盖层更透明或更不透明，您需要更改 CSS 属性 filter（用于 Internet Explorer）和 opacity（用于 Mozilla 和 Opera）。在 filter Alpha（用于 Internet Explorer）中传递不透明度值 1-100，并为 opacity（用于 Mozilla 和 Opera）设置不透明度值 0.1-1。更改这三个属性将使覆盖层与您的网站主题相匹配。
第二个带有 id processing_container 的 division 是消息框的容器。它将垂直显示在客户端区域的中间，水平居中。您可以设置 *.css 属性，例如 border、width、height、background-color，您可以设置 rounded 等。
第三个注释的 division 带有 id processing_title，用于放置进度消息框的标题（如果需要）。但我建议如果您只放置一个函数来显示进度（例如我的例子中的 $.showprogress()），则不要取消注释此部分，我在整个解决方案中使用它。因此，没有对进度消息框的规范，尽管您可以通过编写具有不同标题的更多函数并在解决方案的不同位置使用它。
第四个 division 是您想要显示的任何消息或想要放置的图像的容器。在这里，我放置了一个 HTML 图像，该图像来源于根目录中的 ‘img’ 文件夹，并命名为 ‘googleballs.gif’。不要忘记指定图像的确切宽度和高度，以使框更加坚固有效。在这里，您还可以编写一些消息，例如“正在加载...”、“请稍候”等，并设置 CSS 属性，例如 text-align、vertical-align、padding、font 等。
//This is among bottom few lines of progress.js file
setTimeout(function(){$('#' + msgEle).fadeOut('normal')},10000);
在这里，值 10000 表示 10000 毫秒。这是进度效果的最小超时值。您可以根据需要减小或增大此值。
关注点
实际内容作为演示附加。下载后您将很容易理解。选择各种控件的事件非常重要……下面给出一些示例
- ASPX 菜单：
onclick - ASPX 按钮：
OnClientClick - ASPX DropDownList：
onchange - ASPX HyperLink：
onclick - ASPX LinkButton：
OnClientClick - HTML 按钮：
onclick - HTML Select：
onchange - HTML Anchor：
onclick
大多数情况下，您将使用 jQuery 函数 $.showprogress()，有时在使用客户端脚本时（页面不会回发到服务器），您会稍后使用 $.hideprogress()。在后一种情况下，自动隐藏不起作用。这就是为什么您需要使用函数 $.hideprogress() 手动隐藏进度。
结束语
希望您觉得这些内容有用。感谢阅读。祝你好运。