我在列表中有1000张图像，这些图像的定义方式如下：
<img mat-list-avatar alt="" [src]="file.preview() | async | safe)" />
由于file.preview()的执行时间约为200毫秒，因此我只想延迟对浏览器视口中可见的图像进行加载，并在用户加载时逐点加载。所以我发现loading="lazy"但仍然对1000张图像执行了file.preview（）。
<img mat-list-avatar alt="" loading="lazy" [src]="file.preview | async
| safe)" />
有人知道为什么吗？难道与[src]指令所调用的指令与普通src属性所调用的指令不同？还有其他选择吗？
答案 0 :(得分：1)
当您显示大约1000个数据项的列表时，用户不会在单个实例中看到所有这些数据项。我可能错了，但我要解释的是您试图一次性渲染所有1000个数据项，这可能会触发所有列表项的预览API。我的建议是分批为清单组件提供输入。 Onload仅将10个项目作为渲染组件的输入。跟踪滚动条，并继续向列表中添加更多数据项。这样，并非所有数据项都将被渲染，并阻止调用所有图像。