Question

我需要建立一个图像库：

显示从large-image-directory（done。）
没有浏览器默认滚动条（由Perfect Scrollbar取代），（完成。）
在相同宽度缩略图的列中有图像，（完成。）
首先在大目录中显示新图像，（完成。）
延迟加载缩略图。（问题！）
在智能手机上顺畅滚动（因为5而未达到）。

潜在的无限显示缩略图块（链接到大图像的另一个页面）或者有人想要向下滚动。图库将至少有1000-2000个缩略图链接。

据我所知，一次加载这么多缩略图可能会导致浏览器崩溃，这就是我试图让图片加载lazilym的原因，但对于我的生活，我无法获得任何延迟加载插件来为我的网站工作。我从代码中删除了完美的scollbar但是仍然没有雪茄，我试过了。经过大量的搜索后，我得得出结论，懒惰的负载“可能”并不总是有效。

所以我认为我必须限制页面上加载的缩略图数量，比方说30。但与此同时，我想要一个链接，它将在同一页面上加载另外30个图像而不重新加载页面。 ..

我在添加延迟加载图像插件之前，正在生成此代码。

<head>
    <link href="src/perfect-scrollbar.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="src/jquery.mousewheel.js"></script>
    <script src="src/perfect-scrollbar.js"></script>
    <script>
        jQuery(document).ready(function ($) {
        "use strict";
        $('#Default').perfectScrollbar({ wheelSpeed: 50, wheelPropagation: true, minScrollbarLength: 20 });
        });
    </script>
</head>

<body>
    <style>
    .contentHolder { position:relative; margin:0px auto; padding:0px; width: 100%; height: 100%; overflow: hidden; }
    .contentHolder .content {}
    .spacer { text-align:center }

    html, body {
        margin: 0px;
        padding: 0px;
        background-color:black;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .imagecontainer { width:100%; }

    #videos { width:100%; height:120px; } 

    #photos {
        line-height: 0;
        -webkit-column-count: 5;
        -webkit-column-gap:0px;
        -moz-column-count: 5;
        -moz-column-gap:0px;
        column-count:5;
        column-gap:0px;
        float:left;
    }

    #photos img {
        /* Just in case there are inline attributes */
        width: 99% !important;
        height: auto !important;
        opacity:0.8;
        filter:alpha(opacity=80);
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        transition: all 500ms ease;
        -webkit-backface-visibility: hidden;
    }

    #photos img:hover { 
        width: 100% !important;
        opacity:1;
        filter:alpha(opacity=100); /* For IE8 and earlier */
    }
    </style>

<div style="position:fixed; z-index:4; width:100%; background-color:rgba(100,100,100,0.5)">Simple Menu Bar-Currently empty.</div>
<div id="Default" class="contentHolder">
    <div class="content">
    <section id="photos">

    <?php

    /* Get Directory with Dates Last Modified */

    function getimageswithdates(){
    $directory="preload-images/"; 
    $sortOrder="newestFirst"; 

    $results = array(); 
    $handler = opendir($directory); 

    while ($file = readdir($handler)) {
        if ($file != '.' && $file != '..' && $file != "robots.txt" && $file != ".htaccess"){ 
            $currentModified = filectime($directory."/".$file); 
            $file_names[] = $file; 
            $file_dates[] = $currentModified; 
        } 
    } 

    closedir($handler); 

    //Sort the date array by preferred order 
    if ($sortOrder == "newestFirst"){ 
        arsort($file_dates); 
    } else { 
        asort($file_dates); 
    } 

    //Match file_names array to file_dates array 
    $file_names_Array = array_keys($file_dates); 
    foreach ($file_names_Array as $idx => $name) $name=$file_names[$name]; 
    $file_dates = array_merge($file_dates); 

    //Loop through dates array, save list to array and echo the list 
    $filelist = array();
    $i = 0;
    foreach ($file_dates as $file_dates){ 
        $date = $file_dates; 
        $j = $file_names_Array[$i]; 
        $file = $file_names[$j]; 
        $i++; 
        $filelist[] = $file;
        echo '<a href="color.php?see='.str_ireplace(".jpg", " ", "$file"). '" class="photo-link smoothbox" rel="gallery">
        <img src="preload-images-thumbs/'.$file.'"  /></a>'; 
        }
    echo '</section> </div>';
    }

    /** settings **/
    $images_dir = 'preload-images/';
    $thumbs_dir = 'preload-images-thumbs/';
    $thumbs_width = 200;

    /* function:  generates thumbnail */
    function make_thumb($src,$dest,$desired_width) {
    /* read the source image */
    $source_image = imagecreatefromjpeg($src);
    $width = imagesx($source_image);
    $height = imagesy($source_image);
    /* find the "desired height" of this thumbnail, relative to the desired width  */
    $desired_height = floor($height*($desired_width/$width));
    /* create a new, "virtual" image */
    $virtual_image = imagecreatetruecolor($desired_width,$desired_height);
    /* copy source image at a resized size */
    imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height);
    /* create the physical thumbnail image to its destination */
    imagejpeg($virtual_image,$dest);
    }

    /** generate photo gallery **/
    $image_files = get_files($images_dir);
    if(count($image_files)) {
        $index = 0;
        foreach($image_files as $index=>$file) {
            $index++;
            $thumbnail_image = $thumbs_dir.$file;
            if(!file_exists($thumbnail_image)) {
                $extension = get_file_extension($thumbnail_image);
                if($extension) { make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width); } 
            } 
        }
    }
    else { }

    /* function:  returns files from dir */
    function get_files($images_dir,$exts = array('jpg')) {
        $files = array();
        if($handle = opendir($images_dir)) {
            while(false !== ($file = readdir($handle))) {
                $extension = strtolower(get_file_extension($file));
                if($extension && in_array($extension,$exts)) {
                    $files[] = $file; }
            }
        closedir($handle);
        }
        return $files;
    }

    /* function:  returns a file's extension */
    function get_file_extension($file_name) {
    return substr(strrchr($file_name,'.'),1);
    }

    echo getimageswithdates();

    ?>

</body>
</html>

---------------------编辑-------------------

foreach循环

$filelist = array();
$i = 0;
foreach ($file_dates as $file_dates){ 
    $date = $file_dates; 
    $j = $file_names_Array[$i]; 
    $file = $file_names[$j]; 
    $i++; 
    $filelist[] = $file;
    echo '<a href="color.php?see='.str_ireplace(".jpg", " ", "$file"). '" class="photo-link smoothbox" rel="gallery">
    <img src="preload-images-thumbs/'.$file.'"  /></a>'; 
    }

如果i == 30，那么循环可以暂停，然后在点击时恢复，并在30秒内循环吗？

Answer 1

你的方法是错的，做XHR（ajax）来实现这一点，从javascript发送适当的参数到php，以便它在你想要的特定范围内循环。

php中的图片库：暂停阅读文件数组，继续点击

1 个答案: