jQuery实现滚动时动态加载页面内容

weixin_34144848

于 2016-03-22 13:45:00 发布

阅读量66

点赞数

文章标签： javascript php ViewUI

本文介绍了一种网页内容动态加载的技术实现方式，通过监听滚动事件并动态请求数据来实现页面内容随滚动逐步加载，有效提升了用户体验。

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

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);
});