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

我有一个主页，其中包含一个读取用户输入的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，我一直在寻找一种可能的方式几天。这可能吗？

来源

2013-01-05 Carloos

看起来你应该看看AJAX，这是一种发送http请求而不重新加载整个页面的方式。这可以帮助你。 –

向您的表单添加一个提交事件处理函数，这会使动画gif显示并且不会阻止表单提交。例如使用jQuery：

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

假设你有GIF动画的某处隐藏在页面：

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

来源

2013-01-05 13:57:27

嘿，我试了你写的东西，但是gif仍然显示在第一页上，没有我点击搜索按钮。即使我让一个班级告诉它不显示。 – Carloos

对不起。它是'style =“display：none;”'而不是'class =“display：none;”'。（或者你可以创建一个包含这种风格的CSS类，当然， –

是的，我做到了，我认为这就是你的意思:)但现在它不显示，即使我点击提交，它也不会显示它原因。有没有我特别的地方，我必须把这个JavaScript？ – Carloos

既然你是新来HTML，你需要寻找更多关于ajax and jquery。这将理想地回答你的问题。看看this也有类似的问题。希望这会帮助你。

来源

2013-01-05 14:04:10

谢谢你，先生:)！ – Carloos

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

回答

相关问题