延迟加载的图像加载速度太慢

Question

images文件夹包含大约14000 jpg图像。

我想使用loading = 'lazy'加载它们，但是客户端（Chrome）上存在性能问题。

每个滚动首先显示空白矩形，然后加载图像，但是速度非常慢。

在youtube主页上，我正在流畅地滚动，即，无需等待图像，并且据我所知-向下滚动没有限制。

如何解决？

$arr = glob("../images/*.jpg");
$ht = '';
foreach($arr as $el){
    $ht .= "<img class='bimg' src = '" . $el . "' width = 151.11' height = '86.73' alt = 'img' loading = 'lazy'>\n";
}
echo $ht;

Answer 1

您真的需要显示14000张图像吗？用户实际上要滚动浏览14000张图像吗？他们还会滚动500吗？我不熟悉lazy属性，但是我认为浏览器必须完成的工作越多，这就是为什么您会遇到性能问题。您访问过的最后一个站点是<ul>连续14000个项目是什么？即使是大的<table>元素也会被分页。

我想您可以一次渲染较少的图像（甚至100个像素是很多来一次延迟加载，具体取决于大小），并且一旦用户达到50分，再请求100个，依此类推。分页您的请求。

您可能要看的另一件事是常见的data-lazy=http://example.com/path/source.jpg。您可以阅读有关here的更多信息。即使您不使用框架，也有很多其他关于如何基于窗口滚动事件加载图像的资源。

这里是一个相当简单的答案：https://stackoverflow.com/a/5871121/3404054

我的2美分是，您一次不需要14k图像，使用那么多图像似乎不现实。调整逻辑以在需要时使用所需的内容。