$(document).scroll(function (){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
if(scrollTop + windowHeight >= scrollHeight){
//这里是加载图片ajax
}
});
这是部分代码,逻辑就是滑动到底部的时候请求ajax,在安卓上可以一页一页正常加载,ios上则滑动到底部一下加载好几页,求教
回答
加载好几页是因为scroll事件被多次触发,可以用节流函数来控制触发的时间间隔,比如underscore的throttle函数:
var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);
function updatePosition(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
if(scrollTop + windowHeight >= scrollHeight){
//这里是加载图片ajax
}
}
用一个全局变量控制,默认设为false,滚动时设为true,滚动完成再设为false
可以使用lodash或者是手动作一个时间间隔,强制增加触发间隔。