jquery - 类似于gmail的进度条

Question

如何创建类似于gmail的进度条？我有一个名为 display <div id="display"></div> 的 div其中内容是使用 jquery 从外部页面获取的 $('#display').load('somepage.html');这部分是使用 .click() 事件激活的。所以我正在尝试的是在获取 some.html 以加载到“显示”中时，如何将进度条添加到 <div id="display"></div>

Answer 1

我推荐jQueryUI Progress Bar 。他们有一个动画版本，类似于 Gmail 进度条的样式。您可以使用 jQuery Theme Roller以与 Gmail 相同的方式设置皮肤。

不幸的是，jQuery.load 不为您提供完成的百分比，因此您可以通过缓慢地将进度条动画化为完成来伪造了解总百分比的效果，并且当在加载上执行完整回调时，您应该完成进度条动画片。在调用 .load() 之前启动慢速动画，并确保动画速度足够慢，不会在页面完全加载之前完成假动画。

有some alternatives to .load()您可以使用。我认为在您的情况下，您应该将进度拆分为多个 .load() 调用，并为它们分配任意百分比。例如，当第一个 .load() 完成时，将进度条移动到 25%，然后移动到第二个内容加载的 50%，等等。