Fatal编程技术网
  • php/
  • 使用jquery、php向下滚动时加载内容的重复内容

使用jquery、php向下滚动时加载内容的重复内容

php jquery scroll

使用jquery、php向下滚动时加载内容的重复内容,php,jquery,scroll,Php,Jquery,Scroll,我有一个代码，当我向下滚动页面时，它将从数据库加载更多内容，但我的问题是当我滚动太快时，从数据库加载的内容会重复，如果我使用此代码，结果会是这样，这将给我的用户带来麻烦 代码如下： <?php include('../connection.php'); $action = @$_POST['action']; $boxid = @$_POST['boxid']; if($action <> "get") { ?> <!DOCTYPE html PUBLIC "

我有一个代码，当我向下滚动页面时，它将从数据库加载更多内容，但我的问题是当我滚动太快时，从数据库加载的内容会重复，如果我使用此代码，结果会是这样，这将给我的用户带来麻烦

代码如下：

<?php
include('../connection.php');

$action = @$_POST['action'];
$boxid = @$_POST['boxid'];

if($action <> "get")
{
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" href="scroll.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

        function last_msg_funtion() 
        { 

           var boxid=$(".message_box:last").attr("id");
           var action = "get";
            $('div#last_msg_loader').html('<img src="bigLoader.gif">');
            $.post("loader.php", { boxid: boxid, action: action }, function(data){
                if (data != "") {
                $(".message_box:last").after(data);         
                }
                $('div#last_msg_loader').empty();
            });
        };  

        $(window).scroll(function(){
            if  ($(window).scrollTop() == $(document).height() - $(window).height()){
               last_msg_funtion();
            }
        }); 

    });
    </script>

</head>

<body>
<div align="center">

<?php
$sql=mysql_query("SELECT * FROM announcements ORDER BY announce_id DESC LIMIT 10");
while($row=mysql_fetch_array($sql))
        {
        $msgID= $row['announce_id'];
        $msg= $row['content'];
        $posted= $row['postedby'];
?>
<div id="<?php echo $msgID; ?>"  align="left" class="message_box" >
<span class="number"><?php echo $posted; ?></span><?php echo "<b>".$msgID."</b>"; echo $msg; ?> 
</div>

<?php
}
mysql_close();
?>

<div id="last_msg_loader"></div>
</div>
</body>
</html>

<?php
}
else
{

$last_msg_id=$boxid;
 $sql=mysql_query("SELECT * FROM announcements WHERE announce_id < '$boxid' ORDER BY announce_id DESC LIMIT 5");
 $last_msg_id="";

        while($row=mysql_fetch_array($sql))
        {
        $msgID= $row['announce_id'];
        $msg= $row['content'];
        $posted= $row['postedby'];
        ?>
        <div id="<?php echo $msgID; ?>"  align="left" class="message_box" >
<span class="number"><?php echo $posted; ?></span><?php echo "<b>".$msgID."</b>"; echo $msg; ?> 
</div>
<?php
}
mysql_close();


        }
        ?>  


$（文档）.ready（函数（）{
函数last\u msg\u funition（）
{ 
var-boxid=$（“.message_-box:last”）.attr（“id”）；
var action=“get”；
$（'div#last_msg_loader'）.html（“”）；
$.post（“loader.php”，{boxid:boxid，action:action}，函数（数据）{
如果（数据！=“”）{
$（“.message_box:last”）。在（数据）之后；
}
$（'div#last_msg_loader'）.empty（）；
});
};  
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
最后一项功能（）；
}
}); 
});

那么试试这个代码。。。也许行得通


$(document).ready(function(){

        function last_msg_funtion() 
        { 

           var boxid=$(".message_box:last").attr("id");
           var action = "get";
            $('div#last_msg_loader').html('<img src="bigLoader.gif">');
            $.post("loader.php", { boxid: boxid, action: action }, function(data){
                if (data != "") {
                $(".message_box:last").after(data);         
                }
                $('div#last_msg_loader').empty();
            }).complete(function() { return true; });
        };  

        $(window).scroll(function(){
            if  ($(window).scrollTop() == $(document).height() - $(window).height()){
               if(!last_msg_funtion()){
                   return false;
               }
            }
        }); 

    });



$（文档）.ready（函数（）{
函数last\u msg\u funition（）
{ 
var-boxid=$（“.message_-box:last”）.attr（“id”）；
var action=“get”；
$（'div#last_msg_loader'）.html（“”）；
$.post（“loader.php”，{boxid:boxid，action:action}，函数（数据）{
如果（数据！=“”）{
$（“.message_box:last”）。在（数据）之后；
}
$（'div#last_msg_loader'）.empty（）；
}).complete（函数（）{return true；}）；
};  
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
如果（！last_msg_funtion（））{
返回false；
}
}
}); 
});



编辑：我更改了退出，返回false。。。原因退出可能会中断jquery。。不确定是否测试适合你鞋子的东西；）。。。也许while会更好地使用，而不是如果。。。哦，好吧，试试这个。它可能会解决你的问题


$(document).ready(function(){
  var boxid; // declare global
    function last_msg_funtion() 
    { 

   if(boxid==$(".message_box:last").attr("id")) return false;  // check with previous id

       boxid=$(".message_box:last").attr("id");
       var action = "get";
        $('div#last_msg_loader').html('<img src="bigLoader.gif">');
        $.post("loader.php", { boxid: boxid, action: action }, function(data){
            if (data != "") {
            $(".message_box:last").after(data);         
            }
            $('div#last_msg_loader').empty();
        });
    };  

    $(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           last_msg_funtion();
        }
    }); 

});



$（文档）.ready（函数（）{
var-boxid；//声明全局
函数last\u msg\u funition（）
{ 
if（boxid=$（“.message_-box:last”）.attr（“id”）返回false；//检查上一个id
boxid=$（“.message_-box:last”）.attr（“id”）；
var action=“get”；
$（'div#last_msg_loader'）.html（“”）；
$.post（“loader.php”，{boxid:boxid，action:action}，函数（数据）{
如果（数据！=“”）{
$（“.message_box:last”）。在（数据）之后；
}
$（'div#last_msg_loader'）.empty（）；
});
};  
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
最后一项功能（）；
}
}); 
});

确保数据以完整的方法加载感谢您的回答先生，我想知道具体是什么原因导致了数据内容的复制如果我滚动太快或按住Page Down键直到找到最底部，内容仍然重复，我尝试了您的代码，但仍然相同，那么，应该使用完整的方法api.jquery.com/jquery.postThreak@MMK加载数据是什么意思呢！你是个救生员！：）我将尝试分析您对代码所做的操作，或者您只是将boxid声明为global，这样做了吗？是的。我们需要将boxid声明为全局，并使用boxid等于last message box id equal进行检查，这意味着我们需要停止/返回该函数（因为在ajax加载期间，当滚动时，它们会获得上一个消息id，此时全局值也包含相同的id）。