Javascript 加载新内容时的加载栏

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

您可以访问以下网站：

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

我想要的是在当前内容和新内容之间出现一个div（其中“间隔符”div通常位于我的网站上），并显示一个正在加载的gif/png。一旦加载了新内容，它将淡出。然后新内容将显示在淡入

这可能吗

我试图实现一个“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++;
        });
    }
}
});

---

如果你在页面底部有一个固定的div，当你有条件加载一个新页面时，你会淡入，当新内容加载后，你会淡出

---

额外援助

您可以尝试这样的方法来检查是否有更多的页面可用-将其设置为在第一个ajax之后运行-可能在函数的成功部分：

var url = "page"+nextpage+".html";
$.ajax({
    url: url,
    type:'HEAD',
    error:
        function(){
            // No more pages exist - remove loading
            $('#loading').remove();
        },
    success:
        function(){
            // Good to load another page

        }
});

在那里我发现了这个：

---

将alreadyloading变量设置为true后，在div#newcontent的末尾追加一点html，其中包含一个指示正在加载新内容的图像。使用$（window）。ScrollTop（）当内容通过Ajax到达时，您可以删除添加的一小段代码，并附加新内容

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

---

4） 效果完成后，将第三个分区的内容附加到第一个分区，然后重置第三个分区。

我设法使用$（“#加载”）.slideDown（）；加载开始时，然后是$（“#加载”）.slideUp（）；当它停止加载时。加载分区固定，底部：0px；连接到它，因此它始终在顶部可见。这很好用。然而。。。当我加载新内容时，它会向下滑动，然后在加载完成后消失。但一旦用户再次滚动到页面底部，加载栏再次出现（即使没有可加载的新内容），我是否可以添加代码来检测“如果没有可加载的新页面，则不显示#加载”？抱歉，我是新手，请访问www.jb-design.me/marchupdate2/了解网站。这些图像还不是我的作品，只是为了实现功能…设法使用$（“#加载”）.slideDown（）；加载开始时，然后是$（“#加载”）.slideUp（）；当它停止加载时。加载分区固定，底部：0px；连接到它，因此它始终在顶部可见。这很好用。然而。。。当我加载新内容时，它会向下滑动，然后在加载完成后消失。但一旦用户再次滚动到页面底部，加载栏再次出现（即使没有可加载的新内容），我是否可以添加代码来检测“如果没有可加载的新页面，则不显示#加载”？对不起，我是新手