是一个很好的做法，使用lazy()和悬疑图像加载?

Question

我有一个加载一些图像的组件。它一点也不贵，但我不希望它们从上到下一个接一个地出现，如果你明白我的意思。使用lazy()和Suspense是一种不好的做法吗?

提前感谢!

Answer 1

如果你有特定的组件渲染图像在反应，延迟加载的最佳方式是使用lazy() import或Suspense。不过，最近有一种方法可以使用HTML完成此操作。它适用于内联<img/>标签。

<img loading="lazy"/> 
// also works for iframe
<iframe loading="lazy"/>

请记住，该属性目前仅在chrome和firefox中可用。