如何创建类似于 gmail 的进度条?我有一个名为 display 的 div <div id="display"></div>
,其中内容是使用 jquery 从外部页面获取的$('#display').load('somepage.html');
,这部分是使用 .click() 事件激活的。所以我正在尝试的是在获取something.html以加载“显示”时,如何向<div id="display"></div>
3 回答
我推荐jQueryUI 进度条。他们有一个动画版本,类似于 Gmail 进度条的样式。您可以使用 jQuery Theme Roller以与 Gmail 相同的方式为其设置皮肤。
不幸的是,jQuery.load 没有为您提供完成百分比,因此您可以通过缓慢地为完成进度条设置动画来伪造知道总百分比的效果,并且当在加载时执行完成回调时,您应该完成进度条动画。在调用 .load() 之前启动慢速动画,并确保您的动画速度足够慢,不会在页面完全加载之前完成假动画。
您可以使用.load()的一些替代方法。我认为在您的情况下,您应该将进度分成多个.load()
呼叫并为它们分配任意百分比。例如,当第一个 .load() 完成时,将进度条移动到 25%,然后为第二个内容加载移动到 50%,等等。
您可以使用http://api.jquery.com/jQuery.ajax/来加载内容(而不是加载)并使用事件“beforeSend”和“success”来修改加载器的 CSS。
您可以使用Bootstrap 的进度条进行样式设置。
在函数 .load() 开始之前添加进度条。jQuery-function load() 有一个可选的第二个参数(一个在页面加载后执行的函数):在这个函数中,告诉页面再次删除你的进度条。
我希望它有帮助...