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

Question

我有一个主页，其中包含一个 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 的新手，几天来我一直在寻找一种可能的方法。这可能吗？

Answer 1

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

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

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

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