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

搜索表单的作用是有一定的路径“/结果/ foo”的..这击中控制器进行输入的一些验证，然后重定向到“结果/ foobar的”如果搜索文本是干净的。

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

我想显示上述HTML ..和仅由上述的HTML（或者在视图中或通过jQuery），直到“结果/ 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>

来源

2013-04-09 sambehera

你在说什么涉及到AJAX，实际上更多的是JS问题，尽管你的后端需要用有用的数据做出响应。也许提供更多关于你正在处理的进展情况的信息。 – 2013-04-09 01:17:39

嗨@NathanLilienthal，我只是希望显示上面的HTML [ Loading ...]要么作为覆盖（高Z指数）..或一些其他方法，直到我加载了我的最后一页。 – sambehera 2013-04-09 01:37:44

啊，我误解了，我以为你想要更新进度。 – 2013-04-09 01:40:12

你在这种情况下，做的是保持一个完整的窗口占据格在你的内容，而你的数据在后台加载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');

来源

2013-04-09 01:37:25 basarat

感谢您的回答！但是您正在使用setTimeout（function（）{（“。busyPanel”）。fadeOut（'slow'）; }，2000）; ..我如何翻译该行来模拟页面加载？ $（window）.load（function（）{}）;发生得太晚了，＃（document）.ready ..也有其他方法吗？ – sambehera 2013-04-09 01:41:39

通过ajax（例如$ .get）加载数据，并将面板隐藏在on成功函数中。 – basarat 2013-04-09 01:46:22

对不起，作为一个AJAX虚拟，但哪个视图文件（在rails中）将包含“$ .get”javascript？搜索栏视图？或搜索结果视图？..也是我的项目具有搜索栏页面和搜索结果页面之间的中间控制器的复杂性..此页面用于验证搜索输入并重定向到搜索结果页面。 – sambehera 2013-04-09 01:52:28

你最好的办法是在点击链接时使用一些JS，这个链接显示你的div，然后在你的请求处理过程中它会出现在屏幕上，一旦搜索完成并且你的新页面呈现出来，会消失。

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

-- css 
.progress { display: none; } 

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

查看JSFiddle，简单又容易。

来源

2013-04-09 01:48:27

你的意思是我必须在javascript前端对输入进行验证（确保其数字）而不是后端？ – sambehera 2013-04-09 02:21:01

不，我正在说明如何在加载页面时显示加载div。 – 2013-04-09 02:28:09

我试过这个..一旦我的控制器开始重定向到搜索结果页面，“loading ...”文本就会消失。（/结果/ foobar）..但是，我想继续显示div“while”/ results/foobar正在加载。 – sambehera 2013-04-09 02:31:18

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

回答

相关问题