Question

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

getGallery.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并查看记录到文件的内容...我看到在初始页面加载时所有多个sqls都在执行，如下所示。

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

Answer 1

你可以用以下方法解决它：

+Math.ceil(offset/20)

而不是

+Math.round(offset/20)

jquery autobrowse加载所有图像

1 个答案: