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

在这种情况下，您执行的操作是在您的数据在后台http://jsfiddle.net/basarat/qfrJE/加载时保持一个完整的窗口占据您的内容div：{/ p>

.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的表单条目的链接，然后在您的请求处理完毕后，它会出现在屏幕上，一旦搜索完成，您的新页面呈现它将会消失。

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

-- css
.progress { display: none; }

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

请参阅JSFiddle，简单易用。

显示一些html，直到加载最终页面

2 个答案: