Question

我正在设计我的网站，而且我是javascript等新手（实际上是我的第二个网站），所以请光临我。

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

您可以在

看到该网站

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

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

我想要的是当前内容和新内容之间出现的div（'spacer'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++;
        });
    }
}
});

Answer 1

如果你有一个固定的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

        }
});

我在哪里找到了这个： http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06

Answer 2

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

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

装载新内容时加载栏

2 个答案: