经过大量搜索,我无法找到适合我问题的分页图像库。
我有网页,显示大量的图像(无限)作为画廊。我已经应用了一些图像库插件。但是这个插件的问题是,在网页上加载太多的图像需要花费很多时间,如果我直接到最后一个页面,那么加载最后一个页面的图像需要花费很多时间,因为它会加载之前页面的所有图像。延迟加载在这种情况下也没有帮助。
我显示的图像使用csv文件如下:
<ul id="itemContainer">
<?php
$file_handle = fopen("gallery.csv", "r");
while (!feof($file_handle)) {
$lines_of_text[] = fgetcsv($file_handle, 1024);
}
fclose($file_handle);
foreach ( $lines_of_text as $line):
?>
<li>
<a href="<?php print "photos/".$line[0].".jpg"; ?>" data-lightbox="imggallery"
data-title="<?php print $line[0]." ".$line[1];?>">
<img src="<?php print "photos/".$line[0].".jpg"; ?>" alt="image" style="width:140px; height:140px; border: 1px solid #00C;">
</a>
</li>
<?php endforeach; ?>
</ul>
为了克服这个问题,我试图显示具有url?page=num_of_page
等url的分页图像,以便当前页面上的图像不会等待加载该页面之前的图像,并且加载速度更快。
但我不知道我应该如何做分页(像这个url?page=num_of_page
)在这种情况下?
请帮忙好吗?
// Open File to read
$file = fopen("gallery.csv","r");
while(! feof($file))
{
// Store each line in $data
$data[] = fgetcsv($file);
}
// Get Current Page
$current_page = ($_GET['page']) ? $_GET['page'] : 1;
// Records Per Page
$per_page = 10;
$start = ($current_page - 1) * ($per_page + 1);
$offset = $per_page + 1;
$total_pages = count($data) / $per_page;
//Slice array according to our page
$data = array_slice($data, $start, $per_page);
?>
<ul id="itemContainer">
<?php for($i = 0; $i < count($data); $i++) { ?>
<li>
<a href="<?php print "photos/".$data[$i][0].".jpg"; ?>" data-lightbox="imggallery" data-title="<?php print $data[$i][0]." ".$data[$i][1];?>">
<img src="<?php print "photos/".$data[$i][0].".jpg"; ?>" alt="image" style="width:140px; height:140px; border: 1px solid #00C;">
</a>
</li>
<?php } ?>
</ul>
<?php
// Show Total Pages
for($i = 0; $i < $total_pages; $i++){
echo '<a href="?page='.($i+1).'">'.($i+1).'</a>';
}
在@Touqeer Shafi和PHP分页的帮助下,最终得到了我想要的解决方案:)
代码
<?php
// Open File to read
$file = fopen("gallery.csv","r");
while(! feof($file))
{
// Store each line in $data
$data[] = fgetcsv($file);
}
$limit = 20;
$total_pages = count($data);
$stages = 3;
$page = (int) $_GET['page'];
if($page){
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
//Slice array according to our page
$data = array_slice($data, $start, $limit);
?>
<ul id="itemContainer">
<?php for($i = 0; $i < count($data); $i++) {
?>
<li>
<a href="<?php print "photos/".$data[$i][0].".jpg"; ?>" data-lightbox="imggallery" data-title="<?php print $data[$i][0]." ".$data[$i][1];?>">
<img src="<?php print "photos/".$data[$i][0].".jpg"; ?>" alt="image" style="width:140px; height:140px; border: 1px solid #00C;">
</a>
</li>
<?php } ?>
</ul>
<?php
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<div class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='?page=$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='?page=$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='?page=1'>1</a>";
$paginate.= "<a href='?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='?page=1'>1</a>";
$paginate.= "<a href='?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</div>";
}
//echo $total_pages.' Results';
// pagination
echo $paginate;
?>