如何在用户滚动网页时加载内容。如何实施？
如何根据用户滚动加载网页内容
IT技术
javascript
jquery
2021-01-26 23:00:29
6个回答
一般来说，你需要有这样的结构
....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>
然后，您将需要检测何时接近页面末尾，并获取更多数据
$(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'));
});
}
您可能需要保留一个 javascript 变量lastId，它可以存储最后显示的 id 并将其传递给 AJAX 接收器，以便它知道要返回哪些新内容。然后在你的 AJAX 中你可以调用
$.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
//Assuming the returned data is pure HTML
$(data).insertBefore($('#placeHolder'));
});
只是为了扩展Dutchie432。根据我的经验
if ($(window).scrollTop() == $(document).height() - $(window).height())
可能并非始终如此（我个人无法使其成为真实，因为它是跳跃数字）。
此外，如果用户上下滚动它可能会触发许多请求，而我们正在等待第一个 ajax 调用返回。
所以我所做的使它工作，是使用 >= 而不是 == 。然后，在发出我的 ajax 请求之前解除对 scrollTop 的绑定。如果 ajax 返回了任何数据（这意味着可能有更多数据），则再次绑定它。
这里是
<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>
`
您指的是动态渐进式加载。
是一个有据可查的概念，甚至还有来自不同库的一些内置支持。例如，JQuery 实际上有一个支持渐进式加载的 GridView。
您将需要利用 AJAX 来实现此功能。
您可以使用 window.addeventlistener 跟踪网页的滚动行为，并在用户位于网页底部时向页面加载更多内容。
document.documentElement.scrollTop、document.documentElement.clientHeight 和 document.documentElement.scrollHeight 将帮助您实现这一目标。
例如：
window.addEventListener('scroll',()=>{
const {scrollTop,clientHeight,scrollHeight} = document.documentElement;
if ((scrollTop+clientHeight)>=scrollHeight) {
getContent((current_page+1));
}
});
您可以使用 jscroll 一个 jquery 插件