Javascript 如何根据用户滚动加载网页内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5020351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load the web page content based on user scrolling
提问by gourav
How to load the content while user scroll the web page. How to implement this?
如何在用户滚动网页时加载内容。如何实施？
回答by Dutchie432
Generally speaking, you will need to have some sort of structure like this
一般来说，你需要有这样的结构
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
<div id="placeHolder"></div>
Then, you will need to detect when you are getting close to the end of the page, and fetch more data
然后，您需要检测何时接近页面末尾，并获取更多数据
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
AddMoreContent();
}
});
function AddMoreContent(){
$.post('getMoreContent.php', function(data) {
//Assuming the returned data is pure HTML
$(data).insertBefore($('#placeHolder'));
});
}
You may need to keep a javascript variable called something like lastIdwhich stores the last displayed id and pass that to the AJAX receiver so it knows which new content to return. Then in your AJAX you could call
您可能需要保留一个 javascript 变量lastId，它可以存储最后显示的 id 并将其传递给 AJAX 接收器，以便它知道要返回哪些新内容。然后在你的 AJAX 中你可以调用
$.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
//Assuming the returned data is pure HTML
$(data).insertBefore($('#placeHolder'));
});
I did exactly this on my company's search page.
回答by patrox
Just to expand on Dutchie432. In my experience the
只是为了扩展Dutchie432。根据我的经验
if ($(window).scrollTop() == $(document).height() - $(window).height())
if ($(window).scrollTop() == $(document).height() - $(window).height())
may not be true consistently( personally i couldnt make it true cause it was jumping numbers ).
Also, if the user scrolls up and down it could fire many requests , while we are waiting for the first ajax call to return.
可能并非始终如此（我个人无法使其成为真实，因为它是跳跃数字）。
此外，如果用户上下滚动它可能会触发许多请求，而我们正在等待第一个 ajax 调用返回。
So what i did to make it work, was to use >= instead of == . Then, unbinding the scrollTop before making my ajax request. Then binding it again if the ajax has returned any data (which means there may be more).
所以我所做的使它工作，是使用 >= 而不是 == 。然后，在发出我的 ajax 请求之前解除对 scrollTop 的绑定。如果 ajax 返回了任何数据（这意味着可能还有更多），则再次绑定它。
Here it is
这里是
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll',fetchMore);
});
fetchMore = function (){
if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
$(window).unbind('scroll',fetchMore);
$.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
function(data) {
if(data.length>10){
$(data).insertBefore($('#moreHolder'));
$(window).bind('scroll',fetchMore);
}
});
}
}
</script>
`
`
回答by Feisty Mango
You are referring to Dynamic Progressive Loading.
您指的是动态渐进式加载。
Is a pretty well documented concept and there is even some built-in support for it from different libraries. JQuery actually has a GridView that supports progressive loading pretty easily for example.
是一个有据可查的概念，甚至还有来自不同库的一些内置支持。例如，JQuery 实际上有一个支持渐进式加载的 GridView。
You will need to utilize AJAX to implement this feature.
您将需要利用 AJAX 来实现此功能。
回答by Lazik
You can use jscroll a jquery plugin
您可以使用 jscroll 一个 jquery 插件
回答by terry
You can use some library like jQuery to retrieve the content , then append it to the page content, Or you can use some jquery plugin like this: http://gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/
您可以使用像 jQuery 这样的库来检索内容，然后将其附加到页面内容中，或者您可以使用一些像这样的 jquery 插件：http: //gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/
