这是滚动时调用请求的javascript
$(document).ready(function(){
var tempScrollTop, currentScrollTop = 0;
$(document).scroll(function(){
currentScrollTop = $(document).scrollTop();
var ids = new Array();
if (tempScrollTop < currentScrollTop )
{
var result = currentScrollTop % 100;
if(result == 0)
{
//console.log('scroll happened');
var items = $(".item");
var items_l = items.length;
for(var i = 0; i < items_l; i++)
{
ids[i] = parseInt(items[i].id.replace(/'D+/g,""));
}
ids = ids.sort();
var last_id = ids[0];
$.ajax({
url: "ajax/load",
type: "POST",
data: {last_id : last_id},
success: function(res){
$("#content").append(res);
}
});
}
}
/*else if (tempScrollTop > currentScrollTop )
{
var result = currentScrollTop % 100;
if(result == 0)
{
$("#content").text("Вверх запрос " + result);
}
}*/
tempScrollTop = currentScrollTop;
})
});
这就是控制器的方法:
public function ajaxLoad()
{
$last_id = intval($this->input->post("last_id"));
//$last_id++;
$db_data['query'] = $this->db->query("SELECT * FROM items WHERE id < ".$last_id." ORDER BY id DESC LIMIT 1");
$data['content'] = $this->load->view('item', $db_data, true);
echo $data['content'];
}
我有两个问题:
1) 我如何防止双重请求,有时会使两个相等的记录被输出?当我向下滚动时
2) 我如何使滚动记录的每100个像素都有附加,但问题是很难使currentScrollTol%100==0,我如何将其更改为正常??
这个怎么样?
var tempScrollTop, currentScrollTop = 0, isLoading = false;
$(document).scroll(function(){
[…狙击…]
var last_id = ids[0];
if ( !isLoading ) {
isLoading = true;
$.ajax({
url: "ajax/load",
type: "POST",
data: {last_id : last_id},
success: function(res){
$("#content").append(res);
isLoading = false;
},
error: function() { isLoading = false; } // just in case
});
[…等…]
当然,这只会让你一次加载一个东西,但至少不会锁定你的UI。
您也可以将last_id值存储在更高的范围内(有点像布尔值),并使用它来确保不会再次加载相同的东西。。。这两种方法都有缺点,但可能适合您的需要。
-m1
所以您有两个问题:
1) 你并不总是达到100%条件
2) 你有时不止一次达到100%条件
我建议:
$(document).ready(function(){
var tempScrollTop, currentScrollTop = 0;
var loaded = {};
loaded[0] = true; //assuming the first piece comes loaded
$(document).scroll(function(){
currentScrollTop = $(document).scrollTop();
var ids = new Array();
//this gives you a different int value for each 100 px section
//at 67px, you get 0, at 345px you get 3, etc
int section = Math.floor(currentScrollTop/100)
if(!loaded[section]) {
//prevents double request
loaded[section] = true;
var items = $(".item");
var items_l = items.length;
for(var i = 0; i < items_l; i++)
{
ids[i] = parseInt(items[i].id.replace(/'D+/g,""));
}
ids = ids.sort();
var last_id = ids[0];
$.ajax({
url: "ajax/load",
type: "POST",
data: {last_id : last_id},
success: function(res){
$("#content").append(res);
}
});
}
});
});
我还要注意的是,如果你在向下滚动一点后重新加载,这些解决方案中的任何一个,包括原始解决方案,都会出现一些问题,因为浏览器会跳到你滚动到的点,而不会调用滚动事件来生成高于该点的页面。但这超出了问题的范围。