如何在等待搜索结果显示时添加加载屏幕?

时间:2013-01-05 13:29:15

标签: javascript html css

我有一个主页,其中包含一个读取用户输入的texfield,发送输入内容的值并将其发送到另一个搜索将发生的页面并显示搜索结果。

 <div>
     <form action="****.jsp" method="get" id="search-id">
          <input type ="text" name = "search" id="search" size="70"/><br>
          <br />
          <input type="Submit" value="Search"  class="button rounded"> 
     </form>
     <br />
     <br />
     <br />
</div>

但问题是在实际的第二页显示之前需要一些时间,因此我想在等待该页面实际加载时出现一点加载gif。我有一个gif文件可供使用,但我无法弄清楚如何将其实现到网站中,以便在我点击搜索按钮后显示它。

我对HTML/JS很新,我一直在寻找可行的方法。这有可能吗?

2 个答案:

答案 0 :(得分:2)

向表单添加一个提交事件处理程序,这会使动画gif出现,并且不会阻止表单提交。 JQuery示例:

$('#search-id').submit(function() {
    $('#animated-gif').show();
});

假设您在页面的某处隐藏了动画gif:

<img src="..." style="display: none;" id="animated-gif"/>

答案 1 :(得分:0)

由于您不熟悉HTML,因此您需要更多地了解ajax and jquery。这将理想地回答你的问题。看看this类似的问题。希望这会对你有所帮助。