jquery - 我如何使用 jquery 显示和隐藏这个加载栏

Question

我想在我的网站上使用这个加载动画，但是当我使用 jquery show() 和 hide() 时，我没有得到想要的结果。

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

我假设这是因为 css :not 和 :before 的运行方式，但我的 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

回调 $('.loading').hide(); 在您的 getJson 函数中。这样你的加载 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();
                });

        }
    }