Question

So I have a load more button, and now I want to add a loading more gif to it so a user realizes it is running for the 1-2 seconds it takes to get the data. This is my function:

<script type="text/javascript">
var pageNum = 2;
$(document).on('click', '#loadmore', function() {
     $.get('/loadmore.php?page=' + pageNum + '&aid=4', function(data) {
     $("#append").append(data);
        if(data){
            pageNum++; 
        }else{
            $('#loadmore').hide();  
        }
    });
});
</script>

How would i go about adding a gif that appears only while the data is being loaded?

Answer 1

You can add your loader gif using HTML:

<div class="loader"></div>

CSS:

.loader{background:url(spinner.gif) no-repeat;display:none}

Add a reference in the beginning of your JS:

var gif = $('.loader');

Then work with it before & after the ajax function is completed:

gif.show(); // show the spinner
$.get('/loadmore.php?page=' + pageNum + '&aid=4', function(data) {
    gif.hide(); // hide it when the ajax request is completed