Question

我正在使用“无限滚动”脚本，即使没有更多记录，该脚本也会不断向数据库发送请求。发生这种情况时，它将重新加载页面上的最后一组。我希望函数在到达数据库的最后一条记录时停止运行。我是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;

无论我连续滚动多少次，即使在数据库中的记录用完之后，新内容也会继续加载。每当我到达页面底部时，输出就会不断重复。在这种情况下，我在数据库中有7个帖子，我从7、6开始...然后我不断收到5-1。

Answer 1

在这种情况下，您可以做什么，只需在json中添加一个参数，即可从php或server 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;

希望这种策略对您有帮助

为什么“无限滚动”不会停止加载内容？

1 个答案: