本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博、QQ空间等。 代码如下: 复制代码 代码如下: <br> $(document).ready(function(){<br> var range = 50; //距下边界长度/单位px<br> var elemt = 500; //插入元素高度/单位px<br> var maxnum = 20; //设置加载最多次数<br> var num = 1;<br> var totalheight = 0; <br> var main = $("#content"); //主体元素<br> $(window).scroll(function(){<br> var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)<br> //console.log("滚动条到顶部的垂直高度: " $(document).scrollTop());<br> //console.log("页面的文档高度 :" $(document).height());<br> //console.log('浏览器的高度:' $(window).height());<br> totalheight = parseFloat($(window).height()) parseFloat(srollPos);<br> if(($(document).height()-range) <= totalheight && num != maxnum) {<br /> main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" (num ) (num ) ";height:" elemt "' >hello world" srollPos "---" num "</div>");<br> num ;<br> }<br> });<br> });<br> this is a scroll test; 页面下拉自动加载内容 hello world test DIV 希望本文所述对大家的jQuery程序设计有所帮助。