Infinity Scroll无效

时间:2016-03-17 16:49:17

标签: javascript php jquery html ajax

对于我的profile_page.php,默认情况下,向用户显示10个帖子(数据库中有10行)。如果用户有超过10个帖子,并滚动到页面底部,则div应展开以显示剩余的帖子(最多10个)。因此,如果用户总共有13个帖子,则默认显示10个帖子,然后当用户滚动到底部时,其余三个将显示。

这就是想法,但不幸的是,我的卷轴不起作用。页面意识到它已到达页面底部并执行alert("bottom)`但不加载更多帖子。

这是infinity_scroll.js

$(document).ready(function(){
    var load = 0;   
    var postLen = $('.userposts_panel').find('.message_wrapper').length;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            // start AJAX
            if(postLen >= 10){
                load++;
                $.post("inc/ajax.php", {load:load},function (data){
                $(".userposts_panel").append(data); //  class
                        alert ("bottom");
                });
            } // if closed
        } // if closed
        });
    });

显示帖子的HTML结构(简化版):

<div class="userposts_panel">
   // below is the div in which each post is displayed
  <?php echo "<div class='message_wrapper'> </div> ?>
</div>

看到alert()有效,我开始认为我的ajax.php存在问题 - 但我发现没有任何问题。

这是ajax.php(再次,简化版):

$load = htmlentities(strip_tags($_POST['load']))*10;
$query = mysqli_query ($connect, "SELECT * FROM user_thoughts WHERE added_by='$user' ORDER BY id DESC LIMIT ".$load.",10");

while ($row = mysqli_fetch_assoc($query)) {
    $thought_id      = $row['id'];
    $message_content = $row['message'];
    $date_of_msg     = $row['post_details'];
    $thoughts_by     = $row['added_by'];
    $attachent       = $row['attachment'];

    echo "<div class='message_wrapper'>
      // this is where I will depict all info such as author of post etc.
    </div>";
}
?>

当我到达页面底部时,是否有人能够确定为什么没有加载更多数据?

修改

Chrome console.log(数据) enter image description here

Firefox console.log(数据) enter image description here

1 个答案:

答案 0 :(得分:0)

检查此滚动并尝试

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});