Javascript加载/旋转图像/图标，同时加载搜索结果

Javascript loading / spinning image/icon while loading the search results

本文关键字：加载 搜索结果 图像 旋转 Javascript 图标      更新时间：2023-09-26

我只是想了解更多关于这个网站和w3school之前的帖子，在加载页面内容时显示加载图像/图标。

这是我重新使用的脚本- 

<script type="text/javascript">
$(document).ready(function(){
    $('#Btn_5').click(function() {
        $('#spinner').show();
    });
});
</script>

这是表单部分和脚本-

<form id="iform" method="get" action="">
Search: <input type="text" id="search_box"><br>
<div id="Btn_5" class="btn"><a href="javascript: submitform()">Search</a></div>
</form>

<br>
<div id="spinner" class="spinner" style="display:none;">
    <img id="img-spinner" src="http://www.w3schools.com/jquery/demo_wait.gif" alt="Loading"/>
</div>
<br>
<body>
<script type="text/javascript">
...
$( "div.content:contains('"+ filterarray[i] +"')").css( "display", "block" );
$("#results").append(results);
...
</script>
<div id="results"></div>
</body>

我有这个加载图标旋转器，但在结果显示后它不起作用。它只在按钮(Btn_5)被点击时旋转，加载图标在页面重新加载时消失。

问题:我想运行加载/旋转图标从按钮点击的开始，直到所有的内容下显示。有办法做到这一点吗?

希望我理解正确。

但是，您想在

之前显示旋转控件:
$("#results").append(results);

和隐藏它之后的结果追加?

如果是这种情况，那么你应该可以这样做;

$('#spinner').show(); //show spinner
$( "div.content:contains('"+ filterarray[i] +"')")
               .css( "display", "block" ); //not sure what you are doing here
$('#results').append(results); //append results, which you have not defined in example
$('#spinner').hide(); //hide spinner

用

//before load
window.onbeforeunload = function () { $('#spinner').show(); } 
//after loaded
$(window).load(function() {
    $('#spinner').hide();
  });
相关文章：