jquery - 无限滚动：Chrome 中的双重内容 + 在 IE 中不起作用

Question

下面的代码在 Firefox 19.0 中按预期工作。该脚本从数据库中加载随机文章。

它在 Internet Explorer 中重复加载相同的内容，在 Chrome 中加载双重+不同的内容。

<script type="text/javascript">
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{

$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php",
success: function(html)
{
if(html)
{
$("#wrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});
</script>

这里是 loadmore.php

<?php
include('db.php');
$stmt = $db->prepare("SELECT * FROM db ORDER BY RAND() DESC LIMIT 9");
if($stmt->execute()){
while ($row = $stmt->fetch()) {
echo'
content here
';}}
?>

Answer 1

我猜你总是得到相同的 9 个元素，因为你的 MySQL 查询没有偏移量。

尝试添加偏移量，如下所示：

在 loadmore.php 上

$limit=9;
$limit_offset = $limit*$_GET['offset'];
$stmt = $db->prepare("SELECT * FROM db ORDER BY RAND() DESC LIMIT :limit OFFSET :offset");
$stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
$stmt->bindValue(':offset', $limit_offset, PDO::PARAM_INT);

在您的 JavaScript 代码上：

<script type="text/javascript">
var offset = 0;

...

$.ajax({
    url: "loadmore.php",
    data: { offset: offset }
    success: function(html){
        if(html){
            offset++;
            $("#wrapper").append(html);
            $('div#loadmoreajaxloader').hide();
        } else {
            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
        }
    }
});