您好,欢迎访问一九零五行业门户网

如何用js和 jquery实现无限加载页面

举例:
京东手机版页面 产品列表
首先 定义页面滚动事件  scroll 绑定函数
$(window).on("scroll", function() { scrollfunction(); })
然后定义函数 scrollfunction()
function scrollfunction() { var e = $("#page-num"); e.scrolltop = $(window).scrolltop(); e.scrollstar = e.scrollend; e.scrollend = $(window).scrolltop(); // 分页显示 if (e.scrollstar != e.scrollend) { // 当滚动的时候 显示分页信息 显示1秒 settimeout(function() { e.hide(); }, 1000); var j = null; var l = $(window).height(); var d = $(window).scrolltop(); // 新页的产品列表 页数写在 li 标签里 然后循环所有的这个标签 p_lis = $("#goods-ul").find("li"); p_lis_size = p_lis.size(); for(var ss= 0; ss < p_lis_size; ss++){ f = $(p_lis[ss]); var k = f.offset().top; // 这个元素(相对于文档)的 偏移距离 // 偏移距离 大于windows 滚动距离 且 小于滚动距离+页面高度 的用来当作当前页数 if (k >= d && k < (d + l)) { j = f.attr("data-page"); } } if(j){ $("#currentpage").text(j); } e.show(); } }
页面每个元素 样例:
以上就是如何用js和 jquery实现无限加载页面的详细内容。
其它类似信息

推荐信息