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

Question

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

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

Answer 1

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

使用原型：

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

使用jQuery：

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

Answer 2

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

使用 JQuery：

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

Answer 3

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