在 html 页面加载和渲染期间显示一个 throbber

Question

我有一个呈现缓慢的页面。穿越网络的旅程很快。页面的初始加载速度很快。您实际上可以看到（如果您的机器足够慢）html 组件的初始布局。然后一些 javascript 的东西运行，使其中一些组件全部 ajaxy。然后最终应用 css。

对于让一切都慢下来的 javascript，我无能为力。所以我需要一个 throbber 来告诉用户等一下，浏览器正在工作。有什么办法可以捕获浏览器完成渲染事件？甚至有这样的事件吗？有没有其他方法可以做到这一点？

Answer 1

在代码运行前显示 throbber 并在运行后隐藏它。

使用 JQuery：

$("#throbber").show();
/* Your AJAX calls */
$("#throbber").hide();

Answer 2

在调用所有 Ajax 内容之前检查 DOM 何时准备就绪。

使用Prototype:

document.observe("dom:loaded", function() {
  //your code
});

使用jQuery:

$(document).ready(function() {
      //your code
});

Answer 3

看看：http://plugins.jquery.com/project/throbber