加载搜索结果时的 Javascript 加载/旋转图像/图标答案

【问题标题】：Javascript loading / spinning image/icon while loading the search results加载搜索结果时的 Javascript 加载/旋转图像/图标
【发布时间】：2014-10-18 06:25:15
【问题描述】：

我只是想了解更多来自该站点和 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) 时旋转，并且在页面重新加载时加载图标消失。

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

【问题讨论】：

标签： javascript jquery loading

【解决方案1】：

把它当作

//before load
window.onbeforeunload = function () { $('#spinner').show(); } 

//after loaded
$(window).load(function() {
    $('#spinner').hide();
  });

【讨论】：

【解决方案2】：

希望我理解正确。

但是，您想在之前显示微调器：

$("#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

【讨论】：