Question

我找到了一个很好的ajax / jquery无限滚动插件（http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/），我能够很好地模仿我的内容，但我有一个问题 - 它只调用一次loadmore.php脚本。让我展示一下代码：

在我的index.php文件中：

<script type="text/javascript">
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            $('div#loadmoreajaxloader').show();
            $.ajax({
                url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmoreajaxloader').hide();
                    }else{
                        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                    }
                }
            });
        }
    });
</script>

此部分调用我的loadmore.php文件并向其发送最后一篇文章的ID。这仅在我第一次滚动到页面底部时起作用，它从loadmore.php加载条目但不再调用loadmore.php。我的loadmore.php文件包含以下代码：

<?php

include('./includes/config.php');

if($_GET['lastid']){
    $query = 'SELECT * FROM db WHERE id < "'.$_GET['lastid'].'" ORDER BY id DESC LIMIT 0,3';
    $result = mysql_query($query);
    while ($rec = mysql_fetch_object($result)) {

    [SET MY VARS]

    ?>

    [HTML & PHP DISPLAYING MY POST]

    <?php
    }
}

?>

第一个ajax调用后出现的3个帖子完美呈现，正如我希望他们用正确的数据显示的那样。但是，在前三次出现后，我无法显示接下来的3个帖子。

因此，如果我在index.php上默认有5个帖子，我滚动到底部，ajax调用3个帖子，它们显示完美，但在此之后没有任何显示，即使有很多帖子要显示。我的问题在哪里，ajax / jquery向导？

Answer 1

以上带有以下mod的代码示例是否可以从底部触发固定高度的函数？

添加：

var trigger = $('#postswrapper').height() - 250;

并改变：

if (st >= 0.7*h && !loading && h > 500) {

为：

if ((st == trigger) && (!loading) && (h > 500)) {

Answer 2

您的“if”条件仅在您第一次滚动时满足。基本上，事件被触发了，而不是当你滚动到页面底部，而是当你开始滚动时。用以下内容替换您的代码：

<script type="text/javascript">
    var loading = false;

    $(window).scroll(function(){
        var h = $('#postswrapper').height();
        var st = $(window).scrollTop();

         // the following tests to check if 
         // 1. the scrollTop is at least at 70% of the height of the div, and 
         // 2. another request to the ajax is not already running and 
         // 3. the height of the div is at least 500. 
         // You may have to tweak these values to work for you. 
        if(st >= 0.7*h && !loading && h > 500){
            loading = true;
            $('div#loadmoreajaxloader').show();
            $.ajax({
                url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmoreajaxloader').hide();
                    }else{
                        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                    }
                    loading = false;
                }
            });
        }
    });
</script>

使用无限滚动/ MySQL数据库

2 个答案: