angular - 如何在不使用任何库的情况下以角度延迟加载图像？

Question

一些非常知名的库，比如ng-defer-load，lazysizes可以很容易地将延迟加载性能模式应用于图像，但我们可以手动完成而不使用它们吗？

我们想了解这些库中使用的技术，因此我们可以以某种方式实现它，而无需导入太多库并增加包大小。

编辑

一个assets图片文件夹（jpg，png），我们通常以通常的方式添加到模板中：

<img src="../../../assets/img/logo.png" width="100" height="100" style="display:inline-flex; float:left" />

如何优化这种方法？

谢谢

标签： angular

Answer 1

像这样尝试本机延迟加载

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

以下是加载属性支持的值：

• auto：浏览器默认的延迟加载行为，与不包含该属性相同。
• 懒惰：延迟加载资源，直到它到达与视口的计算距离。
• 急切：立即加载资源，无论它位于页面上的哪个位置。