为什么"无限滚动"不停止加载内容?



我正在使用'无限滚动'脚本,即使没有更多的记录,该脚本也会继续向数据库发送请求。发生这种情况时,它将重新加载页面上的最后一组。我希望该功能在达到数据库上的最后一个记录时停止运行。我是JS的新手,所以我很难进行故障排除,而且我不使用jQuery。我在PHP脚本中做大部分工作。

我一直在这里阅读很多有关"无限滚动"的文章,但我无法获得其他人如何查看JS中的限制。

javascript

function loadPosts(){
    var target = document.getElementById('PostsContainer');
    var contentHeight = target.offsetHeight;
    var yOffset = window.pageYOffset;
    var y = yOffset + window.innerHeight;
    if(y >= contentHeight){
        var xhr = ajaxObj("POST", "loadContent.php");
        xhr.onload = function(){
            target.innerHTML += xhr.responseText;
        }
        xhr.send("action=loadMore");
    }
}
window.onscroll = loadPosts;

php

$sql = "SELECT * FROM posts WHERE post_type = 'a' ORDER BY post_date DESC LIMIT 2" //Original content on page
$totalPosts = 12; (query to DB)
$max = 1;
$current = 2; //Start on record after initial content
while($current < $totalPosts){
  $sql = "SELECT * FROM posts WHERE post_type = 'a' ORDER BY post_date DESC
  LIMIT $current, $max";
  $result = $db_link->query($sql);
  $posts_list += ... //Collect the data from DB
  $current++;
}
echo $posts_list;

即使我在DB中没有记录之后,我不断滚动新内容仍在继续加载。输出每次我到达页面底部时都会不断重复。在这种情况下,我在DB中有7个帖子,我从7、6开始...然后我继续获得5-1的帖子。

,在这种情况下,您可以做什么,只需在JSON中添加一个参数,从phpserver side中添加一个将说明的数据,是否存在数据,您可以基于此添加数据,您可以停止调用loadPosts函数

因此,基本上是算法,

... PHP

while($current < $totalPosts){
......................
......................
  if($current >= $totalPosts)
  {
     $getNext = False;
  }
  else
  {
   $getNext = True;
  }
}

... Javasrcipt

function loadPosts(){
   if(!getNext)
     return false;
   else
   {
   ......................
   ......................
   }
}
window.onscroll = loadPosts;

希望此策略能帮助您

最新更新