在加载新内容时加载栏

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

如果知道您是有一个固定的股利页面的底部，而当你在有条件的加载一个新的页面 - 你淡入，当新的内容被加载时 - 你淡出它？

---

额外援助

你可以尝试这样的事情，以确认是否有较多的网页可供选择 - 设置此第一阿贾克斯后运行 - 或许在功能上的成功部分：

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）效果完成后，将第三部分的内容附加到第一部分，并重设第三部分。