javascript - 将加载 gif 添加到我的 loadmore 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:

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

在您的 JS 开头添加引用:

var gif = $('.loader');

然后在 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