慢速非 Ajax 页面的假加载/进度条答案

【问题标题】：Fake loading/progress bar for slow non-Ajax page慢速非 Ajax 页面的假加载/进度条
【发布时间】：2010-07-26 14:57:19
【问题描述】：

由于大量的数据库查询，我正在开发一个网站，该网站提供一些缓慢（最多大约 4 秒的加载时间）页面。

为了让用户知道新页面正在加载（也为了防止多次点击），我在用户点击链接到缓慢加载页面的页面上显示了一个带有假加载栏的 div。

实际上，显示虚假的加载 div 效果很好。旧页面的 DOM（带有假加载栏）在新页面加载时仍然显示，这意味着加载 div 会一直显示，直到新页面准备好显示。

这就是它的完成方式。 HTML部分：

<!-- link example which will execute the javascript -->
<a href="link/to/slow/page/" class="loading">slow page</a>

<!-- full screen div which gets displayed when clicking a
     "loading" class link. -->
<div id="dim" style="display:none; top:0; left:0; width:100%; height:100%; z-index:9999;">
    <div id="loading">
        <p>loading data, please wait...</p>
        <img src="loading.gif" alt="loading..." />
    </div>
</div>

Javascript (jQuery) 部分：

$(".loading").each(function() {
    $(this).click(function() {
        $("#dim").fadeIn();
    });
    return true;
});

现在的问题是，如果用户在浏览器中从慢速页面（刚刚使用 FF 3.6 测试）返回，有时仍会显示加载栏 div。

问题：

这甚至是设计这种假加载栏的好方法吗？
如果是，有没有办法阻止浏览器在返回浏览器历史记录时显示 div？

感谢任何提示。

结论：

看起来没有简单的方法来伪造它。我将使用 real 加载栏进行 Ajax 数据检索。

【问题讨论】：

你为什么不优化查询，而不是试图解决问题，仍然让用户等待而烦恼？
查询和数据库已经针对这个用例进行了优化，我认为没有太大的改进空间。这与惹恼用户无关，相反，我想向他们展示他们的查询正在运行，因此他们不会多次点击此类链接。

标签： jquery html dom progress-bar

【解决方案1】：

如果您的查询被优化为不运行那么长时间，您就不需要假的进度条了。

但是，您在这里处理的是浏览器缓存，因此您无法强制浏览器显示或不显示任何内容，除非页面请求在点击后退按钮时完成。

一个非常老套的做事方式是在文档就绪时检查#dim fadein 是否可见并使其不可见。

这样，当点击发生时，它开始显示，如果他们点击后退按钮，浏览器会呈现页面，检查它是否“就绪”可见，并确保它不可见，除非点击按钮/链接

【讨论】：

你说得对，我不能真正依赖浏览器在返回历史时会显示什么。我可能会顺其自然，或者通过 Ajax 请求检索数据。

【解决方案2】：

是否有很多数据要显示，因此数据检索速度很慢？如果是这样，如何减少您最初加载的数据集并使用 ajax 请求请求后续数据块？

【讨论】：

主要瓶颈是数据库查询，而不是数据量。但是感谢您的回答，看起来没有便宜的解决方案可以做到这一点。我可能会切换通过 Ajax 请求检索数据，或者让它完全正常。