滚动加载更多内容
滚动加载更多内容
1 // 判断是否需要加载更多的内容 2 function loadMoreData() { 3 var viewH = $(window).height(); //可见高度 4 var scrollTop = $(window).scrollTop(); //已滚动高度 5 var contentH = $("html").get(0).scrollHeight; //内容实际高度 6 console.log(contentH + "-" + viewH + "-" + scrollTop); 7 // 当剩余未显示内容少于一定的高度时，执行加载 8 if (contentH - viewH - scrollTop <= 300) { 9 doLoadViewList(); 10 } 11 } 12 // 测试：加载内容 13 function doLoadViewList() { 14 var data = '<div class="view-list"></div>' 15 $('.view-list-box').append(data); 16 } 17 18 /** 19 * 频率控制 20 * @param {Function} fn [需要调用的函数] 21 * @param {[type]} delay [延迟时间，单位毫秒] 22 * @param {[type]} mustRunDelay [最大延迟时间，单位毫秒] 23 */ 24 var throttle = function(fn, delay, mustRunDelay) { 25 var timer = null; 26 var t_start; 27 return function() { 28 var context = this, 29 args = arguments, 30 t_curr = +new Date(); 31 clearTimeout(timer); 32 if (!t_start) { 33 t_start = t_curr; 34 } 35 if (t_curr - t_start >= mustRunDelay) { 36 fn.apply(context, args); 37 t_start = t_curr; 38 } else { 39 timer = setTimeout(function() { 40 fn.apply(context, args); 41 }, delay); 42 } 43 }; 44 }; 45 window.onscroll = throttle(loadMoreData, 50, 100);
