Want to display loading gif only when initial data are not loaded on page
Question
I want to display loading GIF only when initial records are not loaded on page (for example 10 records per page). I want loading GIF to disappear once initial 10 records are loaded on page. I have tried below piece of code but it is working partially. It displays loading GIF when initial records are not loaded on page but it is not disappeared automatically when 10 initial records are loaded/displayed on page. Once load more button is pressed to load more records, loading GIF disappeared automatically so that part is working fine.
Please let me know if I have not explained properly.
if(track_click == 0)
{ $('.animation_image').show(); }
Below is entire code.
<script type="text/javascript">
$(document).ready(function() {
var track_click = 0;
var total_pages = <?php echo $total_review_pages; ?>;
var statepkid = <?php echo $int_statepkid; ?>;
var regionpkid = <?php echo $int_regionpkid; ?>;
$('#results').load("fetch_page.php", {'page':track_click, 'state':statepkid, 'region':regionpkid}, function() {track_click++;});
if(track_click == 0)
{ $('.animation_image').show(); }
$(".load_more").click(function (e) {
$(this).hide();
$('.animation_image').show();
if(track_click <= total_pages)
{
$.post('fetch_pages.php',{'page': track_click, 'state':statepkid, 'region':regionpkid}, function(data) {
$(".load_more").show();
$('.animation_image').hide();
$("#results").append(data);
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
$('.animation_image').hide();
track_click++;
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
$(".load_more").show();
$('.animation_image').hide();
});
if(track_click >= total_pages-1)number
{ $(".load_more").attr("disabled", "disabled"); }
}
});
});
</script>
2 answers
solution1
1 2016-04-06 00:38:17
The fast and easy way to do this in your case since you rely on CSS class
would be to find the container that display's the image in your page. You can use the chrome inspect (right click on the page, inspect) and use the select element tool (arrow in square, top left) then select the element or just create it in plain code (=
I believe it could be .animation_image. This is a CSS class name, because it start with a dot. So your Jquery refer to any element of that class.
<html class="my-css-class"></html>
So just create a simple css class
.my-css-class {
background-image: url("loader.gif");
}
You want the element you selected or created to have this class by default on your page. So when the initial page is loaded Jquery document.ready you would remove it using jquery as well.
$("#elementById").removeClass('my-css-class');
This query would remove that css class;
Since you now have many class for the same element and that you will remove and add them it would be wise to call the element by ID.
I dont know what you are feeding this element with but you use
$("#results").append(data);
This mean that you insert data in #result after what is already there.
So just use the CSS trick or instead of .append use .html this will remove anything in that element and replace it with data. This will remove previous data.
But I notice you also use PHP so you could play with the result on server side however your image request will get bigger each time. The CSS trick might be best option for you.
But since you load something over a background, it wont be visible so you might be fine with just a default background until something cover's it.
solution2
0 ACCPTED 2016-04-06 05:26:05
My answer is based on help provided by @MadeInDreams
Javascript (Lines with comments are added to resolve the issue)
<script type="text/javascript">
$('.animation_image').show(); // show loading image initially when no data are loaded on page
$(document).ready(function() {
var track_click = 0;
var total_pages = <?php echo $total_review_pages; ?>;
var statepkid = <?php echo $int_statepkid; ?>;
var regionpkid = <?php echo $int_regionpkid; ?>;
$('#results').load("fetch_page.php", {'page':track_click, 'state':statepkid, 'region':regionpkid},
function() {
track_click++;
$('.animation_image').hide(); // Hide loading image when data are loaded initially
});
$(".load_more").click(function (e) {
$(this).hide();
$('.animation_image').show();
if(track_click <= total_pages)
{
$.post('fetch_pages.php',{'page': track_click, 'state':statepkid, 'region':regionpkid}, function(data) {
$(".load_more").show();
$('.animation_image').hide();
$("#results").append(data);
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
$('.animation_image').hide();
track_click++;
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
$(".load_more").show();
$('.animation_image').hide();
});
if(track_click >= total_pages-1)number
{ $(".load_more").attr("disabled", "disabled"); }
}
});
});
</script>
HTML
<div class="animation_image"><img src="../images/ajax-loader.gif"> Loading...</div>
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.