jquery autobrowse加載所有圖像

我想使用jquery.esn.autobrowse.js插件無限滾動，但遇到問題。該插件一次加載所有圖像。問題似乎JavaScript正在通過更新偏移量而不用滾動頁面來連續調用URL。以下是HTML和PHP腳本。先謝謝您的幫助。jquery autobrowse加載所有圖像

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，看看哪些將記錄到文件...我看到所有的多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

來源

2013-02-06 Girish

我有同樣的問題，但它用來工作。我目前正在調試！ –

您可以與解決它：的

+Math.ceil(offset/20)

代替

+Math.round(offset/20)

來源

2016-04-30 06:53:51

jquery autobrowse加載所有圖像

回答

相關問題