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

0
votes

I just want to understand more of the previous post from this site and w3school, where the loading image/icon is displayed while loading the page content.

Here's the script I've re-used - 

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

Here's the form section and 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>

I have this loading icon spinner, but it doesn't work after the results are displayed. It only spins when button (Btn_5) is clicked and loading icon disappears when the page reloads.

QUESTION: I want to run the loading/spinning icon from the start of the button click until all content under the are displayed. Is there a way to do this?

2
javascriptjqueryloading

2 Answers

0
votes

I hope I am understanding correctly.

But, you want to show the spinner before:

$("#results").append(results);

and hide it after the results are appended?

If that is the case, then you should just be able to do;

$('#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
0
votes

Use that as

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

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