延迟加载图像加载太慢

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。即使您不使用框架，也有很多关于如何基于 window 滚动事件加载图像的其他资源。

这是一个相当简单的答案：

我的 2 美分是您不需要一次使用 14k 个图像，使用那么多图像似乎不现实。调整你的逻辑，在你需要的时候使用你需要的东西。

Answer 2

一页请求14000？我什至无法想象在浏览器中加载 1k 的图像，如果它已经是 14k 了，还要多多少。

来自您的代码：

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

我有几个建议：

您正在浏览器中加载所有图像 src='".$el."'。通常，lazyload 不会获取 src 属性中的图像。它有时通过 data 属性存储位置，然后 lazyload 插件将动态获取它。
检查网络选项卡以检查页面的性能。
14k的图片，我建议你批量取数据。例如，加载 1000 中的 100，等等。您可以通过 ajax.

延迟加载图像加载太慢

lazy loading images are loading too slowly

html

php

lazy-loading