在加载新内容时加载栏
我在设计我的网站,我对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++;
});
}
}
});
如果知道您是有一个固定的股利页面的底部,而当你在有条件的加载一个新的页面 - 你淡入,当新的内容被加载时 - 你淡出它?
额外援助
你可以尝试这样的事情,以确认是否有较多的网页可供选择 - 设置此第一阿贾克斯后运行 - 或许在功能上的成功部分:
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
设置好后alreadyloading变量设置为true,追加位的html到div#newcontent的结尾,其中包含指示正在加载新内容的图像。使用$(window).ScrollTop()进一步向下滚动以确保这是可见的。当内容通过Ajax到达时,您可以删除您添加的一小段代码,并追加新的内容。
或者,使用3个div标签,如下所示: 1)已加载的内容保留在第一个分区中。 2)当滚动条到达底部时,触发你的函数,为包含加载图像的第二个分区调用jQuery FadeIn效果。使用上述功能向下滚动一下以确保它可见。 3)当内容到达时,将其放入第三个div,然后为此调用同时出现的FadeIn效果,并为第二个分区调用FadeOut效果。 4)效果完成后,将第三部分的内容附加到第一部分,并重设第三部分。
我设法使用$(“#loading”)。slideDown();当加载开始时,然后$(“#loading”)。slideUp();当它停止加载。 加载div是固定的,bottom:0px;附加到它,所以它总是可见ontop。 这工作完美。但是... 当我加载新内容时,它会滑落,然后一旦加载完成就会消失。但是,一旦用户再次滚动到页面的底部,加载栏再次出现(即使没有新的内容可用于加载) 是否有可以添加的代码来检测'如果没有新页面加载,不显示#loading'? 对不起,我是 – JByrne 2012-03-18 13:04:36
的新手请访问www.jb-design.me/marchupdate2/网站。这些图像并不是我的工作,只是为了功能... – JByrne 2012-03-18 13:10:09
设法使用$(“#loading”)。slideDown();当加载开始时,然后$(“#loading”)。slideUp();当它停止加载。加载div是固定的,bottom:0px;附加到它,所以它总是可见ontop。这工作完美。但是......当我加载新内容时,它会滑落,然后一旦加载完成就会消失。但是,一旦用户再次滚动到页面的底部,加载栏再次出现(即使没有新的内容可用于加载)是否有我可以添加的代码来检测'如果没有新页面加载,不显示#loading'?对不起,我是这个新手 – JByrne 2012-03-18 13:08:18