PHP 带有延迟加载的图库

Question

我正在尝试使用 php 和 lazyload 构建图片库。我有大约 8000 张图片不能一次加载。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div class="gallery">
    <?php
                $dir = "img/";
                $i = 0;
                if (is_dir($dir)) {
                    if ($dh = opendir($dir)) {
                    while (($file = readdir($dh)) !== false) {
                        if(is_file($dir . $file)){
                             echo "<img class='lazyload' data-src='img/$file' src='img/$file' width='auto' height='600px'>";
                        }
                      }
                    closedir($dh);
                    }
                } ?>

<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>

  </div>
</body>
</html>

我可以一次加载 img 文件夹中的每张图片，但我无法在向下滚动时加载更多图片。我不想一次加载所有图像。

Answer 1

只需删除 src='img/$file' 就可以了。该问题可能是由于错误的图像 src 路径造成的，这里是静态图像工作片段：

<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div class="gallery">
   
<img class="lazyload" data-src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' width='auto' height='600px'><br><br>

<img class="lazyload" data-src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' width='auto' height='600px'><br><br>

<img class="lazyload" data-src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' width='auto' height='600px'><br><br>

<img class="lazyload" data-src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' width='auto' height='600px'><br><br>

<img class="lazyload" data-src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' width='auto' height='600px'><br><br>

<img class="lazyload" data-src='https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg' width='auto' height='600px'><br><br>
<img class='lazyload' data-src='https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' width='auto' height='600px'><br><br>
                
</div>

PHP 带有延迟加载的图库

PHP Image gallery with lazyload

html

javascript

php

jquery

jquery-lazyload