Question

我正在尝试创建一个显示存储在数据库中的注释的博客：但是我希望当用户向下滚动时，在页面上动态创建注释时会显示注释，而不是指向下一组的链接评价。

目前我正在使用带有php的MySQL来显示存储的评论。

$query  = "SELECT * FROM comment ORDER BY time DESC";
$result = mysql_query($query);

while($data = mysql_fetch_assoc($result)){
  echo "<comment><div class='comment-bubble'><p>" . $data['comment'] . "</p></div>";
  //other div structure & data here
}

我知道有像jscroll这样的插件。但这会从其他HTML文件而不是数据库中获取数据。

我知道该方法可能需要更改，因为php在页面加载之前加载数据...那么最好的方法是什么呢？

谢谢你们！

Answer 1

最好的解决方案是在mysql查询中限制组合。

示例

`SELECT * FROM comment ORDER BY time DESC LIMIT 0,10;  # Retrieve rows 1-10`

随后您可以尝试使用

`SELECT * FROM comment ORDER BY time DESC LIMIT 10,10;  # Retrieve rows 11-20`

等等，每次滚动时一次检索10条评论。

Answer 2

只需加载所有数据并隐藏第二个数据，直到最后一个。如果用户滚动值与用户滚动鼠标时使用scrollTop（）返回值具有相同的值，则使用像scrollTop（）这样的jquery技巧来逐步检测滚动和fadeIn（）你的div。

Answer 3

好的，从我投入的研究数量来看：实际上不可能通过mySQL动态更新而不首先加载所有注释。这是因为PhP在页面显示之前加载，因此JavaScript无法动态呈现更多注释，除非页面被刷新。

我将在AJAX上发挥作用，因为它是为动态变化的网站而制作的。我希望很快能够完整地回答这个问题。

编辑：使用jquery AJAX我想出了这个：

//Load more comments when reaching the end of the page
var isPreviousEventComplete = true, isDataAvailable = true;
$(window).scroll(function () {
    if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
        if (isPreviousEventComplete && isDataAvailable) {

            isPreviousEventComplete = false;
            $(".LoaderImage").css("display", "block");

            $.ajax({
                type: "POST",
                url: 'ajax/query.php',
                data: "from=" + counter,

                success: function (html) {
                    $("#comments").append(html);
                    counter++;
                    isPreviousEventComplete = true;

                    if (html == '') isDataAvailable = false;

                    $(".LoaderImage").css("display", "none");
                },
                error: function (error) {
                    alert("error " + error);
                }
            });

        }
    }
});

像魅力一样工作。感谢Hendry Tanaka让我指出了正确的方向。

从数据库动态加载元素

3 个答案: