Javascript loading / spinning image/icon while loading the search results
Question
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 answers
solution1
0 2014-08-25 06:39:07
Use that as
//before load
window.onbeforeunload = function () { $('#spinner').show(); }
//after loaded
$(window).load(function() {
$('#spinner').hide();
});
solution2
0 2014-08-25 06:44:05
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.