滚动时动态加载页面内容

动态加载网页内容的实现方式

最新推荐文章于 2021-06-03 14:59:12 发布

转载最新推荐文章于 2021-06-03 14:59:12 发布 · 3.1k 阅读

常用jQuery代码片段专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何通过JavaScript实现网页内容的动态加载，即在用户向下滚动页面时加载更多内容，包括代码示例和关键逻辑解析。

有些网站的网页内容不是一次性加载完毕的，而是在鼠标向下滚动时动态加载的，这是怎么做到的呢？看下面代码：

var loading = false;
$(window).scroll(function(){
 if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
      if(loading == false){
           loading = true;
           $('#loadingbar').css("display","block");
           $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
           });
      }
 }
});

$(document).ready(function() {
 $('#loaded_max').val(50);
});