Question

我只是想了解更多此网站上的帖子和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）时旋转，并且在页面重新加载时加载图标消失。

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

Answer 1

将其用作

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

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

Answer 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

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

2 个答案: