我正在尝试使用 jquery.esn.autobrowse.js 插件进行无限滚动，但遇到了问题。该插件一次加载所有图像。问题似乎是javascript通过更新偏移量而不滚动页面来连续调用url。下面是 HTML 和 PHP 脚本。在此先感谢您的帮助。
GalleryPage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.esn.autobrowse.js"></script>
<script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="js/jstorage.js"></script>
</head>
<body>
<div id="content">
<div id='gallery'></div>
<script type="text/javascript">
$(function () {
$('#gallery').autobrowse(
{
url: function (offset)
{
return "getGallery.php?album_id=1&page="
+Math.round(offset/20);
},
template: function (response)
{
var markup='';
for (var i=0; i<response.items.length; i++)
{
markup+='<a href="'+response.items[i].photoID+'"><img src="'+response.items[i].Image+'" /></a>';
};
return markup;
},
itemsReturned: function (response) { return response.items.length; },
offset: 0,
max: 10000,
loader: '<div class="loader"></div>',
useCache: false,
expiration: 1
}
);
});
</script>
</div>
</body>
</html>
获取画廊.php
<?php
$count=20;
$offset=0;
if (isset($_GET['count'])) $count=$_GET['count']*1;
if (isset($_GET['page'])) $offset=$_GET['page']*$count*1;
$album_id=$_GET['album_id'];
$arr = array();
$sql="SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = $album_id and published=1 ORDER BY orderId LIMIT $offset,$count";
//logToFile('Sql....'.$sql);
$rs = mysql_query($sql);
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo '{"items":'.json_encode($arr).'}';
?>
如果我打开 logtoFile 并查看记录到文件的内容...我看到在初始页面加载时正在执行的所有多个 sql 如下所示。
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 0,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 20,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 40,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 60,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 80,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 100,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 120,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 140,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 160,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 180,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 200,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 220,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 240,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 260,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 260,20
Sql....SELECT photo_id as photoID,thumbnail_location as Image FROM photos WHERE album_id = 1 and published=1 ORDER BY orderId LIMIT 280,20