如何解决在Scroll Position上进行Ajax调用时,如何阻止功能崩溃?
| 这是我正在处理的项目的URL: http://www.buymyoldiphone.com/Ajax_Tests/TodTom/Social%20V2.0/NEW/index.html 当滚动条位于页面下方约3/4时,我试图允许它加载新内容(使用Ajax):$(window).scroll(function () {
var height = $(window).height();
var scrollTop = $(window).scrollTop();
if(scrollTop > (height*3)) {
numRes = numRes + 20;
reloadContent();
}
});
但是正如您所看到的(如果您查看URL),它会发疯直到一切消失。
还有编码建议?
编辑
该功能似乎可以正常工作:
$(\'#loadmore_btn\').live(\'click\',function() {
numRes = numRes + 20;
reloadContent();
});
解决方法
几天前我遇到了同样的问题。这是我固定的方式:
1)就在document.ready的开头,我这样说:
$(\'body\').data(\'isAJAX\',false);
$(\'body\').ajaxStart(function(){
$(\'body\').data(\'isAJAX\',true);
}).ajaxStop(function(){
$(\'body\').data(\'isAJAX\',false);
});
2)然后,当我打ajax时,我只是检查:
if(!$(\'body\').data(\'isAJAX\')){
// make my ajax call
}
当然,我只有一个可能的ajax调用,所以对我来说很容易,但是...它也可能对您有帮助:)
, 设置超时以延迟调用ajax。
var _timeout;
$(window).scroll(function () {
clearTimeout(_timeout);
var height = $(window).height();
var scrollTop = $(window).scrollTop();
if(scrollTop > (height*3)) {
numRes = numRes + 20;
_timeout = setTimeout(function(){
reloadContent();
},50);
}
});
超时时间不必太长,因为滚动事件会触发很多操作,因此可以稍微延迟一下通话时间。
, 解决了我的问题,
事实证明,scrollTop不会给您向下的距离比例,而只是一个数字来表示您的滚动位置-因此,如果您在页面上3/4处滚动,并且加载了50%的内容,scrollTop编号将保持不变如果您的滚动位置没有移动,则相同。总滚动距离仅增加50%。
因此,我决定使用包装所有文档元素的容器高度来表示总滚动距离,而我发现距离的比率(scrollTop / Total Distance)为.75来表示页面加载。
$(window).scroll(function () {
var height = $(window).height();
var scrollTop = $(window).scrollTop();
var scrollAll = $(\'#container\').height();
var scrollRatio = (scrollTop/scrollAll);
if(scrollRatio > .75) {
if(!$(\'body\').data(\'isAJAX\')){
numRes = numRes + 20;
eReload = 1; //reload all content
AddOr = 1;
reloadContent();
//alert(scrollRatio) will always be around .75
}
}
});
感谢lonut Staicu提供了以上代码,以使该功能平稳运行
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。