javascript - 从 csv 文件读取图像的分页

Question

经过大量搜索后，我无法找到适合我的问题的带有分页的正确图片库。

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

我使用 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)？

请问有什么帮助吗？

Answer 1

// 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>';
    }

希望它能发挥作用。