如果您网站上的某些页面需要一些时间才能加载，您可能需要考虑使用页面加载器。页面加载器是任何类型的动画，它以视觉方式向访问者传达页面正在加载，并让他们耐心等待几秒钟。如果没有页面加载器，访问者可能会认为您的网站没有响应，并沮丧地点击离开。页面加载器还可以提供一些分散注意力的东西，这实际上可以让等待时间显得更短。
如果您的页面加载延迟是由数据库读取等原因造成的，则访问者可能会停留在当前页面，直到他们尝试访问的页面加载完成。这与大型图像等导致的页面加载延迟不同，在大型图像延迟的情况下，访问者会在延迟发生之前到达页面。在前面提到的场景中，CSS 页面加载器可以很好地发挥作用。以下是使用方法：
- 创建一个包含页面加载器的 DIV。这可以是一个小的动画 GIF，或者可能是 SWF 闪存动画。
- 在您的 CSS 中，将此 DIV 定位到您需要的位置。它可以放置在主要内容之上，或者您可以像这样进行全屏白色遮罩：
div#page_loader { position: absolute; top: 0; bottom: 0%; left: 0; right: 0%; background-color: white; z-index: 99; } - 将此 DIV 添加到您网站上链接到需要加载器的页面的每个页面。然后确保为 CSS 中的此 DIV 添加 **display: none;**，这将使其在正常情况下在这些页面上完全不显示。
- 需要使用一点 JavaScript 来切换该 DIV 的 display 属性。此 JavaScript 放入链接到慢速加载页面的每个链接元素中。如下所示：
<a onclick="javascript:document.getElementById('page_loader').style.display='block';" href="slowpage.html">Slow Page</a>
点击该链接将触发 JavaScript 将 DIV 的 display 设置为“block”，立即显示它。这将对访问者可见，直到慢速加载的页面加载完成，然后他们将被移动到该页面。
更新：有一篇新的帖子 在此处包含示例。
也许我有点无聊，但您对这个有什么看法？
div#page_loader {
display: block;
…
}
然后在您的 <head> 标签中，您需要放置
<head onLoad=”function(){
document.getElementById(‘page_loader’).style.display=’none’;
}”>
这样您就不再需要在要显示加载器的页面上声明 onclick 事件，它会自动执行。
我想我有点困惑……
将 display 切换放在标题中有什么帮助？本教程假设您不想在每个锚元素上都放置页面加载器，而只是在需要它的那个（或几个）上。
哇。
这很有趣！
你好（再次）Chris，感谢您更正我之前的回复。
我又犯了一个错误，所以不是将 JavaScript 代码放入“head”标签中，而是将其放入“body”标签中 ;-)
我同意您只在慢速页面上显示加载器的想法，但是您如何知道哪些页面是慢速的？我认为它取决于太多因素，无法预测。
我提出的解决方案很简单，适用于所有页面，我们还可以想象设置某种计时器，如果页面在该时间内未加载，则显示加载器。
无论如何，这是一篇很棒的文章，别误会我 ;-)
是的，您是对的，如果您无法分辨哪些页面加载缓慢，那么您的方法就是最佳选择。
我实际上是因为正在处理的一个网站而写了这篇文章。只有一个特定的页面有一个大型数据库调用，导致页面加载缓慢，而此解决方案对此完美有效。您的方法更简单 :)
有点困惑。您可以制作演示以便我下载吗？非常感谢。
我无法真正制作可下载的示例，因为我所说的那种慢速页面加载来自缓慢的数据库或大型数据库调用。我无法真正将数据库包含在下载文件中。也许我可以以某种方式伪造它。或者我可以在此网站上尝试发布一个示例页面，但我犹豫这样做，因为如果很多人使用它，可能会严重影响网站的性能。敬请关注。
它对我不起作用，或者我错过了什么。
也许我需要一个例子。
@delang：我发布了一篇关于此的新文章，其中包含示例页面的链接 此处
谢谢老兄。