2

我正在尝试使用 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
4

1 回答 1

0

您可以通过以下方式解决它：

+Math.ceil(offset/20)

代替

+Math.round(offset/20)
于 2016-04-30T06:53:51.427 回答