Question

我想在我的网站中使用此加载动画，但是当我使用jquery show()和hide()时，我无法获得所需的结果。

.css('display', 'block')和.css('display', 'none')也没有达到预期的效果。

我假设这是因为css：not和：之前的操作但我的css技能不是很好所以我不确定。

加载动画代码： https://codepen.io/MattIn4D/pen/LiKFC

我的代码：

document.onscroll = function() {
    if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight) {
            $('.loading').show();
            $.getJSON('/json.php?prefetch', function(data) {
                    //json sorting here.
                });
        $('.loading').hide();
        }
    }

Answer 1

在getJson函数中回调$('.loading').hide();。这样你的加载gif将在getjson函数运行时隐藏。您还可以根据条件检查数据并隐藏加载的gif。

document.onscroll = function() {
    if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight) {
            $('.loading').show();
            $.getJSON('/json.php?prefetch', function(data) {
                    //json sorting here.
                   $('.loading').hide();
                });

        }
    }

如何使用jquery显示和隐藏此加载栏

1 个答案: