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

I have a page that renders slowly. The trip across the net is quick. The initial load of the page is quick. You can actually see (if your machine is slow enough), the initial layout of the html components. Then some javascript stuff runs, making some of those components all ajaxy. Then finally the css gets applied.

我有一个缓慢渲染的页面。穿越网络的旅程很快。页面的初始加载很快。您实际上可以看到(如果您的机器足够慢),html组件的初始布局。然后一些javascript的东西运行,使这些组件中的一些都是ajaxy。然后最后css得到应用。

I can't do anything about the javascript that's slowing everything to a crawl. So I need a throbber to tell the user to hold up, the browser is working. Is there any way to trap the browser is done rendering event? Is there even such an event? Is there another way to do this?

我无法做任何关于使所有内容变慢的javascript的内容。所以我需要一个悸动来告诉用户支持,浏览器正在运行。有没有办法陷阱浏览器完成渲染事件?甚至有这样的事件吗?还有另一种方法吗?

3 个解决方案

#1

Show the throbber before the code is run and hide it after.

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

Using JQuery:

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

#2

Check to see when the DOM is ready before calling all your Ajax stuff.

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

using Prototype:

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

using jQuery:

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

#3

Take a look on: http://plugins.jquery.com/project/throbber

请查看:http://plugins.jquery.com/project/throbber

#1