加載搜索結果時Javascript加載/旋轉圖像/圖標

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 個解決方案

解決方案1
0 2014-08-25 06:39:07

解決方案2
0 2014-08-25 06:44:05

加載搜索結果時Javascript加載/旋轉圖像/圖標

問題描述

2 個解決方案

解決方案1 0 2014-08-25 06:39:07

解決方案2 0 2014-08-25 06:44:05

解決方案1
0 2014-08-25 06:39:07

解決方案2
0 2014-08-25 06:44:05