在某些元素出现在我的视口中之前，如何防止它们加载？

Question

我的页面将包含 1000 多张图片。它们被分成不同的摄影项目，因此您只需向下滚动并浏览它们。但是，所有（目前为 135 个）图像都会立即缓存，因此速度很慢，即使图像比原始尺寸缩小了 75%。我使用 PHP 动态加载图像，以便我的客户更轻松地通过最少的代码编辑来扩展他们的产品组合。

我正在寻找 Pinterest 使用的东西。在您滚动到图像（或预览）并且它们在视口中实际可见之前，它不会加载到图像（或预览）中。

动态PHP代码：

$dir = ("projects/photography/" . scandir("projects/photography/")[$photographyIndex]);
$files = scandir($dir);
foreach($files as $file) {
    if($file !== "." && $file !== ".." && $file !== "info.php") {
        echo "<img src='$dir/$file' class='h-full' />";
    }
}

Answer 1

谢谢@Ownagin！

问题是我的 <img> 标签上没有 loading="lazy"。我知道这是一件事，但从来没有费心去应用它，因为我读到它是默认启用的。

$dir = ("projects/photography/" . scandir("projects/photography/")[$photographyIndex]);
$files = scandir($dir);
foreach($files as $file) {
    if($file !== "." && $file !== ".." && $file !== "info.php") {
        echo "<img src='$dir/$file' class='h-full' loading='lazy' />";
    }
}

在某些元素出现在我的视口中之前，如何防止它们加载？

How do I prevent certain elements from loading in until they're in my viewport?

html

css

php

optimization

tailwind-css