javascript - 加载新内容的加载栏

Question

我有一个 div，其中包含一系列设计项目。当用户滚动到页面底部时，JavaScript 会检测到这一点并将新的页面内容加载到该 div 中。

您可以在以下位置查看该网站

http://www.jb-design.me/marchupdate/

我遇到的问题是新内容只是暂停然后在下面加载。没有向用户反馈新内容正在加载等。

我想要的是在当前内容和新内容之间出现一个 div(“spacer”div 通常位于我的网站上。并显示加载 gif/png。一旦新内容出现，该 div 就会淡出)已加载。新内容将出现在淡入下方...？

这可能吗？

我尝试实现“var pageLoadisloaded”，但没有用。

我确实是一个新手，过去几天一直在网上寻找解决方案，现在我想我应该寻求帮助!

提前谢谢

下面的 JavaScript 代码...

alreadyloading = false;
nextpage = 2;

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
            $('#newcontent').children().last().after(data);
            alreadyloading = false;
            nextpage++;
        });
    }
}
});

Answer 1

将已经加载变量设置为 true 后，将一些 html 附加到 div#newcontent 的末尾，其中包含指示正在加载新内容的图像。使用 $(window).ScrollTop() 进一步向下滚动以确保其可见。当内容通过 Ajax 到达时，您可以删除添加的一小段代码，然后附加新的内容。

或者，使用 3 个 div 标签，如下所示: 1) 已经加载的内容保留在第一个分区中。 2) 当滚动条到达底部时，您的函数被触发，它为包含加载图像的第二个分区调用 jQuery FadeIn 效果。使用上述功能向下滚动一点以确保其可见。 3) 当内容到达时，将其放入第三个 div 中，然后为其调用同时的 FadeIn 效果，并为第二个 div 调用同时的 FadeOut 效果。 4) 效果完成后，将第三个分区的内容追加到第一个分区，并重置第三个分区。