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');

然后在＆amp;之前使用它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成功之后隐藏它

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

2 个答案: