1

我正在使用下面的代码进行无限滚动，但我得到了 2 个“错误”。1. 当它到达最后一条记录时，它会再次显示接下来的 4 条记录 2. 当它到达最后并显示所有记录时，我没有收到“没有更多记录”的消息

在我的 php 文件中，我得到了这个：

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

   $(window).scroll(function() {

    if (  document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight )
    {           


    $("#myloaderias").fadeIn("fast");       

    $.ajax({ //START OF AJAX CALL
    url: "loadmore.php?lastComment=" + $(".imgholder:last").attr("id"),
    cache: false,
    success: function(html){            

        $("#myloaderias").fadeOut("fast");

        if(html){ //IF(HTML)
            $("#masterdivholder").append(html); //APPEND RESULTS IN THE DIV THAT HOLDS ALL THE IMAGES   
            $("#nmc").hide();   
        } else {    
            $("#nmc").fadeIn("fast'");
        }   //END IF(HTML)

    }//END SUCCESS FUNCTION 
    });//END OF AJAX CALL


    }   //END OF CHECK IF YOU ARE AT THE BOTTOM OF THE PAGE     
    }); //END OF (window).scroll(function(){


});
</script>

<div id="myloaderias" style="display:none;"><img src="images/ajax-loader.gif"></div>

<div id="loadMoreComments">
<div style="clear:both;"></div>
</div>

<div id="nmc">No More Results</div>

以及用于检索 inde.php 中数据的 php 代码：

<?php

require "connectiondb.php";

$active = "1";
$mysql_query = mysql_query ("SELECT * FROM gallery WHERE active = '$active' ORDER BY id DESC LIMIT 0,30");
while($pic = mysql_fetch_assoc($mysql_query)) {

echo'   
<div class="imgholder" id="'.$pic['id'].'">
<div class="imgcaption">'.$pic['imgtitle'].'</div>
<div class="imgclass">
<a href="www"><img src="'.$pic['thumbpath'].'" width="210" height="140" alt="'.$pic['imgtitle'].'" style="-moz-border-radius: 6px; -webkit-border-radius: 6px;" border="0"/></a>
</div>
<div id="sharebox">
<div style="width:210px; height:32px; float: left; margin-top:3px;">
<div id="socialbox1"><a href="'.$pic['id'].'"><img src="socialicons/facebook.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/twitter.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/google.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/youtube.png" width="32" height="32" border="0" /></a></div>
</div>
</div>
</div>';
}
?>

在下一个文件 loadmore.php 中：

<?php
require "connectiondb.php";


if($_GET['lastComment']){

$lastcomment = $_GET['lastComment'];

$myquery = mysql_query ("SELECT * FROM gallery WHERE id < '$lastcomment' ORDER BY id DESC LIMIT 0,5");
while($pics = mysql_fetch_assoc($myquery)) {

echo'   
<div class="imgholder" id="'.$pics['id'].'">
<div class="imgcaption">'.$pics['imgtitle'].'</div>
<div class="imgclass">
<a href="www"><img src="'.$pics['thumbpath'].'" width="210" alt="'.$pics['imgtitle'].'" border="0" /></a>
</div>
<div id="sharebox">
<div style="width:210px; height:32px; float: left; margin-top:3px;">
<div id="socialbox1"><a href="'.$pics['id'].'"><img src="socialicons/facebook.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/twitter.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/google.png" width="32" height="32" border="0" /></a></div>
<div id="socialbox"><a href="#"><img src="socialicons/youtube.png" width="32" height="32" border="0" /></a></div>
</div>
</div>
</div>';
}

}
?>

谢谢大家！

4

1 回答 1

1

尝试将 async: false 添加到 ajax 调用。这将解决正时化问题。

另一种解决方案更复杂，但您需要等待下一组记录才能执行下一次 ajax 调用。

于 2013-04-20T12:15:24.527 回答