無限滾動一次加載所有項目？

Question

我正在使用名爲autobrowse的腳本它代表從JSON文件中提取數據的無限滾動類型的腳本。當我將腳本設置爲重複（循環）這些項目幾次時，它就像在demo example from the creator of the script中一樣完美。這是通過在max中輸入一個更高的值來完成的，就像他們在其示例中將它設置爲100，從而從flickr json feed中提取數據。

但我不想重複我的結果，而是希望它們像每10或20個項目一樣加載，並在加載json（數據庫）的最後一項時停止。但是，當我在腳本中設置「max：1」選項時，爲了只從JSON加載我的項目一次，它將一次顯示所有元素，無論它們的數量是多少。沒有無限的滾動。

因此，我想設置頁面底部的每個滾動條應顯示多少個項目。例如10。

這是我生成我JSON文件：

<?php 
$link = mysql_pconnect("localhost", "user", "pass") or die("Could not connect"); 
mysql_select_db("dbase") or die("Could not select database"); 

$arr = array(); 

$rs = mysql_query("SELECT * FROM bannersright ORDER BY HdOrder"); 

while($obj = mysql_fetch_object($rs)) { 
$arr[] = $obj; 
} 

echo '{"bannersright":'.json_encode($arr).'}'; 

?> 

這是我如何調用自動瀏覽腳本在我的視圖文件：

$(function() { 

     $("#wrapper #sidebar-right").autobrowse(

      { 

       url: function (offset) 
       {     
        return "http://www.mysite.com/json.php"; 
       }, 
       template: function (response) 
       { 
        var markup=''; 
        for (var i=0; i<response.bannersleft.length; i++) 
        { 
         markup+='<a href="'+response.bannersleft[i].URL+'"><img src="'+response.bannersleft[i].Image+'" /></a>' 
        }; 
        return markup; 
       }, 
       itemsReturned: function (response) { return response.bannersleft.length; }, 
       offset: 0, 
       max: 1, 
       loader: '<div class="loader"></div>', 
       useCache: false, 
       expiration: 1 
      } 
     ); 

}); 

我相信它是與偏移功能，但不知道如何完成這一點。他們有一個更多的演示與他們的網站上，這是與此非常相似的Twitter，但他們稱這樣的JSON：

url: function (offset) 
{ 
    return "http://twitter.com/status/user_timeline/ParisHilton.json?count=10&page=OFFSET&callback=?".replace(/OFFSET/, 1+Math.round(offset/10)); 
}, 

（他們的演示不起作用任何更多的原因是因爲Twitter改變了他們的JSON提供API）

從他們稱爲Twitter的飼料的方式，我想Twitter可以選擇在他們的API中設置頁面。

所以我想我的最後一個問題是：你如何在JSON中創建頁面？我需要將哪些php代碼添加到我的json.php文件中以便能夠從頁面中獲取元素？

它不必與json頁面，如果你有另一個解決方案，請分享它。

Answer 1

你忘了設置限制MySQL的請求，並在網址發電機：

PHP

<?php 
$link = mysql_pconnect("localhost", "user", "pass") or die("Could not connect"); 
mysql_select_db("dbase") or die("Could not select database"); 

//GET page/count 
$count=10;$offset=0; 
if (isset($_GET['count'])) $count=$_GET['count']*1; 
if (isset($_GET['page'])) $offset=$_GET['page']*$count*1; 

$arr = array(); 

$rs = mysql_query("SELECT * FROM bannersright 
        ORDER BY HdOrder 
        LIMIT $offset,$count"); #<-HERE 

while($obj = mysql_fetch_object($rs)) { 
$arr[] = $obj; 
} 

echo '{"bannersright":'.json_encode($arr).'}'; 

?> 

JS：

$(function() { 

     $("#wrapper #sidebar-right").autobrowse(

      { 

       url: function (offset) 
       {     
        return "http://www.mysite.com/json.php?count=10&page=" 
          +Math.round(offset/10); // <-- AND HERE 
       }, 
       template: function (response) 
       { 
        var markup=''; 
        for (var i=0; i<response.bannersleft.length; i++) 
        { 
         markup+='<a href="'+response.bannersleft[i].URL+'"><img src="'+response.bannersleft[i].Image+'" /></a>' 
        }; 
        return markup; 
       }, 
       itemsReturned: function (response) { return response.bannersleft.length; }, 
       offset: 0, 
       max: 1, 
       loader: '<div class="loader"></div>', 
       useCache: false, 
       expiration: 1 
      } 
     ); 

});