我正在尝试使用 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 文件夹中加载每张图片，但向下滚动时无法加载更多图片。我不想一次加载所有图像。
1 回答
临摹微笑
TA贡献1982条经验 获得超2个赞
只需删除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>
添加回答
举报
0/150
提交
取消