Question

我已按照此主题中的帮助：Using infinite scroll w/ a MySQL Database

已经接近让这个正常工作。我有一个使用jquery masonry以块显示的页面，其中的块由来自mysql数据库的数据填充。当我滚动到页面的末尾时，我成功地获得了loading.gif图像，但在图像之后立即显示“没有更多帖子显示。”如果这是真的，它应该说什么。我最初只在10-15个帖子中调用了5个帖子，所以当我到达页面底部时，其余的帖子应该加载但是当我真的没有更多的时候我会收到应该出现的消息讯息。

这是我的javascript：

var loading = false;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()) {   
            var h = $('.blockContainer').height();
            var st = $(window).scrollTop();
            var trigger = h - 250;

              if((st >= 0.2*h) && (!loading) && (h > 500)){
                loading = true;
                $('div#ajaxLoader').html('<img src="images/loading.gif" name="HireStarts Loading" title="HireStarts Loading" />');
                $('div#ajaxLoader').show();
                $.ajax({
                    url: "blocks.php?lastid=" + $(".masonryBlock:last").attr("id"),
                    success: function(html){
                        if(html){
                            $(".blockContainer").append(html);
                            $('div#ajaxLoader').hide();
                        }else{
                            $('div#ajaxLoader').html('<center><b>No more posts to show.</b></center>');
                        }
                    }
                });
            }
        }
    });

这是块实际上在页面上的php。此页面最初发布数据库中的5个项目。 javascript抓取最后发布的id并通过ajax将其发送到blocks.php脚本，然后使用最后发布的id从数据库中获取其余项目。

$allPosts = $link->query("/*qc=on*/SELECT * FROM all_posts ORDER BY post_id DESC LIMIT 5");
        while($allRows = mysqli_fetch_assoc($allPosts)) {
            $postID = $link->real_escape_string(intval($allRows['post_id']));
            $isBlog = $link->real_escape_string(intval($allRows['blog']));
            $isJob = $link->real_escape_string(intval($allRows['job']));
            $isVid = $link->real_escape_string(intval($allRows['video']));
            $itemID = $link->real_escape_string(intval($allRows['item_id']));

            if($isBlog === '1') {
                $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC";
                $result = $link->query($query);
                while($blogRow = mysqli_fetch_assoc($result)) {
                    $blogID = $link->real_escape_string($blogRow['blog_id']);
                    $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title']));
                    $blogDate = $blogRow['pub_date'];
                    $blogPhoto = $link->real_escape_string($blogRow['image']);
                    $blogAuthor = $link->real_escape_string($blowRow['author']);
                    $blogContent = $link->real_escape_string($blogRow['content']);  

                    //clean up the text
                    $blogTitle = stripslashes($blogTitle);
                    $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150)));           

                    echo "<div class='masonryBlock' id='".$postID."'>";
                    echo "<a href='post.php?id=".$blogID."'>";
                    echo "<div class='imgholder'><img src='uploads/blogs/photos/".$blogPhoto."'></div>";
                    echo "<strong>".$blogTitle."</strong>";
                    echo "<p>".$blogContent."</p>";
                    echo "</a>";
                    echo "</div>";

                }
            }

以下是AJAX调用的blocks.php脚本中的php：

//if there is a query in the URL
if(isset($_GET['lastid'])) {

//get the starting ID from the URL
$startID = $link->real_escape_string(intval($_GET['lastid']));
//make the query, querying 25 fields per run
$result = $link->query("SELECT  * FROM all_posts ORDER BY post_id DESC LIMIT '".$startID."', 25");

$html = '';
//put the table rows into variables
while($allRows = mysqli_fetch_assoc($result)) {
    $postID = $link->real_escape_string(intval($allRows['post_id']));
    $isBlog = $link->real_escape_string(intval($allRows['blog']));
    $isJob = $link->real_escape_string(intval($allRows['job']));
    $isVid = $link->real_escape_string(intval($allRows['video']));
    $itemID = $link->real_escape_string(intval($allRows['item_id']));

    //if the entry is a blog
    if($isBlog === '1') {
        $query = "SELECT * FROM blogs WHERE blog_id = '".$itemID."' ORDER BY blog_id DESC";
        $result = $link->query($query);
        while($blogRow = mysqli_fetch_assoc($result)) {
            $blogID = $link->real_escape_string($blogRow['blog_id']);
            $blogTitle = $link->real_escape_string(html_entity_decode($blogRow['blog_title']));
            $blogDate = $blogRow['pub_date'];
            $blogPhoto = $link->real_escape_string($blogRow['image']);
            $blogAuthor = $link->real_escape_string($blowRow['author']);
            $blogContent = $link->real_escape_string($blogRow['content']);  

            $blogTitle = stripslashes($blogTitle);
            $blogContent = html_entity_decode(stripslashes(truncate($blogContent, 150)));

            $html .="<div class='masonryBlock' id='".$postID."'>
                    <a href='post.php?id=".$blogID."'>
                    <div class='imgholder'><img src='uploads/blogs/photos/".$blogPhoto."'></div>
                    <strong>".$blogTitle."</strong>
                    <p>".$blogContent."</p>
                    </a></div>";

        }
    }
    echo $html;
}

我尝试过使用jquery无限滚动插件，但这样做似乎要困难得多。我不知道这里的问题是什么。我已经添加了警报并进行了测试，javascript脚本正在完全处理，所以必须使用blocks.php吗？

编辑：我已通过将sql查询更改为SELECT * FROM all_posts WHERE post_id < '".$startID."' ORDER BY post_id DESC LIMIT 15

对此问题进行了临时修复

现在通过ajax加载块，但是它们一次只加载一个块。 ajax正在为每个块发送一个请求，它们一个接一个地消失，是否可以使用jquery砌体使它们全部淡入？

Answer 1

我在另一个答案中看到了你的代码，我建议在MySql中使用LIMIT功能而不是偏移值。例如：

SELECT * FROM all_posts ORDER BY post_id DESC LIMIT '".(((int)$page)*5)."',5

这只会在AJAX请求中获取页码并自动获取偏移量。这是一个一致的查询，独立于页面上的最后结果。在jQuery代码中发送类似page = 1或page = 2的内容。这可以通过几种不同的方式完成。

首先，计算页面上构造的元素数量，然后除以页面上的数字。这将产生页码。

其次，您可以使用jQuery并将当前页码绑定到正文：

$(body).data('page', 1)

每页加载一次。

执行此操作确实是更好的方法，因为它对所有操作使用一个查询，并且不需要有关页面上已有数据的大量信息。

唯一需要注意的是，这个逻辑要求第一页请求为0，而不是1.这是因为1 * 5将评估为5，跳过前5行。如果为0，它将评估为0 * 5并跳过前0行（因为0 * 5为0）。

让我知道你有任何问题！

Answer 2

您是否尝试过进行任何调试？

如果您还没有使用，我建议您使用firebug插件。

ajax调用是否返回空？如果是，请尝试回显sql并验证这是否是正确的语句，并且所有变量都包含预期的信息。考虑到客户端，服务器和数据库之间发生了很多通信，很多事情都可能失败。

在回复您的评论时，您将在这段代码中添加html：

if(html){
     $(".blockContainer").append(html);
     $('div#ajaxLoader').hide();
}

我会在if语句之前执行 console.log（html）和 console.log（$（“。blockContainer”）。length）。

使用MySQL数据进行无限滚动

2 个答案: