在加载最后一页之前显示一些 html

Question

我正在使用 Rails 发出搜索请求。

搜索表单的操作是某个路径 "/results/foo" .. 它会命中一个控制器，该控制器对输入进行一些验证，然后如果搜索文本是干净的，则重定向到 "results/foobar"。

<h1 class="center"><progress style="font-size: 160%;">Loading...</progress></h1>

我想显示上面的 html.. 并且只显示上面的 html（在视图中或通过 jquery），直到“results/foobar”完全加载。

有没有办法在最后一页完成加载之前显示这样的进度条动画 (html)？

更多详情（搜索栏页面有这样的代码）：

<form class="form-search" action="/s_results/iscan" method="POST">
        <div class="input-append">
            <input name="searchtext" type="text" class="span4 search-query" placeholder="Type number here...">
            <button type="submit" class="btn">
                <i class="icon-search"></i>
                Search
            </button>
        </div>
    </form>

Answer 1

在这种情况下，您所做的就是在后台加载数据时保持一个完整的窗口占据您的内容的 div http://jsfiddle.net/basarat/qfrJE/：

.busyPanel {
    /* absolute position all over */
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    /* Remove any defaults */
    border: none;
    margin: 0;
    padding: 0;
    /* Make sure it stays on top */
    z-index: 2500;
    /* any image */
    background: grey;
    /* initial visibility */
    display: visible;
}

然后在加载完成后将其删除：

$(".busyPanel").fadeOut('slow');

Answer 2

您最好的选择是在单击显示您的div 的表单条目的链接时使用一些 JS，然后它会在您的请求处理时出现在屏幕上，一旦搜索完成并且您的新页面渲染它就消失了。

-- html
<div class="progress">Loading...</div>

-- css
.progress { display: none; }

-- js
$('#search').click(function() {
  $('.progress').show();
  window.location.href = 'foo';
});

见JSFiddle，简单易行。