从csv文件读取图像的分页

时间:2015-07-13 06:03:52

标签: javascript php jquery csv pagination

经过大量搜索后,我无法找到适合我问题的适当图片库。

我的网页显示了很多图片(无限制)作为图库。我已经应用了一些图库插件。但是这个插件的问题就像是,在网页上加载太多图像需要花费很多时间,如果我直接进入应用了分页的最后一页,那么在加载所有图像时需要花费大量时间在最后一页上加载图像在那之前的页面上。在这种情况下,延迟加载也没有帮助。

我正在使用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?page=num_of_page)?

请帮忙吗?

2 个答案:

答案 0 :(得分:1)

<a href="mailto: sample143@example.com"><

希望它能奏效。

答案 1 :(得分:0)

最后在@Touqeer Shafi和PHP pagination的帮助下得到了我想要的解决方案:)

这是代码

<?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;
        ?>