在我的loadmore jquery按钮中添加一个加载gif

Add a loading gif to my loadmore jquery button

本文关键字：一个 gif 加载 添加 loadmore 我的 jquery 按钮      更新时间：2023-09-26

所以我有一个加载更多的按钮，现在我想向它添加一个加载更大的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？

您可以使用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

只需创建一个gif，例如http://ajaxload.info/然后把它放在你的按钮后面并隐藏它，只在你访问你的恐惧时显示它，并在ajax成功后隐藏它

相关文章：