添加一个加载的gif到我的加载更多jquery按钮

Question

所以我有一个加载更多按钮，现在我想添加一个加载更多的gif，所以用户意识到它运行了1-2秒，它需要得到数据。这是我的函数：

<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> 

我将如何去增加仅在加载数据时显示的GIF？

Answer 1

可以使用HTML添加您的装载机GIF：

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

CSS：

var gif = $('.loader'); 

然后使用它：

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

在JS的开头添加一个参考ajax功能完成后&之前：

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

Answer 2

只是创建一个gif例如在http://ajaxload.info/上，并放在你的按钮后面并隐藏它，只有当你正在访问你的功能并在ajax成功后隐藏它时才显示它