Php Mysql Ajax Infinite Scrolling

Question

Я использую следующий код для создания бесконечной прокрутки, но у меня есть 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> 

и PHP кода для извлечения данных в inde.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>'; 
} 

} 
?> 

Спасибо всем!

Answer 1

Попробуйте добавить async: false для вызова ajax. Это устранит проблему сихронизации.

Другое решение более сложное, но перед выполнением следующего вызова ajax вам нужно подождать следующего набора записей.