html - Angular src 图像的延迟加载

Question

我在一个列表中有 1000 张图像，它们按以下方式定义:

<img mat-list-avatar alt="" [src]="file.preview() | async | safe)" />

因为 file.preview() 需要大约 200 毫秒来执行，我想延迟加载它只为浏览器视口(viewport)中可见的图像加载它，并在用户加载时一点一点地加载他们。所以我发现 loading="lazy" 但是 file.preview() 仍然会执行 1000 张图像。

<img mat-list-avatar alt="" loading="lazy" [src]="file.preview | async
| safe)" />

有人知道这是为什么吗？这可能与调用不同于普通 src 属性的 [src] 指令有关吗？还有其他选择吗？

Answer 1

当您显示大约 1000 个数据项的列表时，用户不会在单个实例中看到所有这些数据项。我可能是错的，但我的解释是您试图一次渲染所有 1000 个数据项，这可能会触发所有列表项的预览 api。我的建议是分批向您的列表组件提供输入。 Onload 只是将 10 个项目作为渲染组件的输入。跟踪滚动条并不断向列表中添加更多数据项。这样，并非所有数据项都将被渲染并防止调用所有图像。