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

How to add a loading screen while waiting for search result to show up?

本文关键字:添加 加载 屏幕 显示 在等待 搜索结果      更新时间:2023-09-26

我有一个主页,它包含一个文本字段,用于读取用户输入,发送输入的任何值,并将其发送到搜索将发生的另一个页面,并显示搜索结果。

 <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很陌生,几天来我一直在寻找可能的方法。这可能吗?

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

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

假设你有一个动画GIF隐藏在页面的某个地方:

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

由于您是HTML的新手,因此您需要更多地搜索ajax and jquery。这将完美地回答你的问题。看看这个类似的问题。