無限滾動：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>'); 
     } 
    } 
});