无限滚动一次加载所有项目？ [英] Infinite Scroll Loading All Items at Once?
问题描述
我正在使用一个名为 autobrowse 的脚本它代表一种无限滚动类型的脚本从JSON文件中提取数据。当我设置脚本重复（循环）项目几次时，它就像在创建者的演示示例中一样完美脚本。这是通过在max中输入一个更高的值来完成的，就像他们在示例中设置为100一样从flickr json feed中提取数据。
I'm using a script called autobrowse It represents an infinite scroll type of script which pulls the data from a JSON file. When I set the script to repeat(loop) the items a few times it works perfectly like in the demo example from the creator of the script. That is done by entering a higher value in max, like they have it set to 100 in their example which pulls data from a flickr json feed.
但我不这样做我希望重复我的结果，而不是我希望它们像每10或20个项目一样加载，并在加载json（数据库）的最后一项时停止。但是当我在脚本中设置max：1选项以便仅从JSON加载我的项目时，它会立即显示所有元素，无论它们有多少。没有任何无限滚动。
But I don't want to repeat my results, instead I want them to load like every 10 or 20 items and stop when the last item from the json(database) is loaded. But when I set the "max: 1" option in the script in order to load my items from the JSON only once, it displays all the elements at once, no matter how many they are. No infinite scrolling whatsoever.
所以我想设置页面底部每个滚动应显示的项目数。例如10个。
So I want to set how many items should be displayed with every scroll at the bottom of the page. Like 10 for example.
这是我生成JSON文件的方式：
This is how I generate my JSON file:
<?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).'}';
?>
这就是我在视图文件中调用autobrowse脚本的方式：
And this is how I call the autobrowse script in my view file:
$(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：
I believe that it has something to do with the offset function, but not sure how to accomplish this. They have one more demo with twitter on their website, which is pretty similar with this, but they call the json like this:
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）
(the reason their demo doesn't work any more is because twitter changed their json feeds api)
从他们调用twitter feed的方式来看，我认为twitter可以选择在他们的API中设置页面。
From the way they call the twitter feed, I suppose twitter had the option to set pages in their API.
所以我想我的最后一个问题是：你如何用JSON创建页面？我需要将什么PHP代码添加到我的json.php文件中才能从页面中拾取元素？
So I guess my final question would be: how do you create pages in JSON ? What php code do I need to add to my json.php file in order to be able to pickup the elements from it in pages?
它不一定是使用json页面，如果你有其他解决方案，请分享它。
It doesn't have to be with json pages, if you have another solution please kindly share it.
推荐答案
你忘了在mySQL请求和url中设置LIMIT生成器：
You forget to set LIMIT in mySQL request and in url generator:
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
}
);
});
这篇关于无限滚动一次加载所有项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
