I'm trying to build an image gallery with php and lazyload. I have around 8000 images which shouldn't load at once.
<!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>
I can load every pic at once in the img folder but I am not able to load more while scrolling down. I don't want to load all images at once.
Simply you can just remove the src='img/$file' and it will work fine.
The issue might be due to a wrong images src path, here is a static images working snippet:
<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>