问题如下:在向用户显示页面之前,需要等待样式、字体等加载完毕。它们将被应用(虽然这一切都在加载,但网站看起来很歪)并显示加载器。你可以用什么来检查一切是否良好?
例如,如果您使用load事件,则将预期加载图像等。这不适合我的情况。我尝试使用 Suspense,但据我了解,它不适用于仅在组件上加载样式
<Suspense fallback={<Loading />}>
<SomeComponent />
</Suspense>
问题如下:在向用户显示页面之前,需要等待样式、字体等加载完毕。它们将被应用(虽然这一切都在加载,但网站看起来很歪)并显示加载器。你可以用什么来检查一切是否良好?
例如,如果您使用load事件,则将预期加载图像等。这不适合我的情况。我尝试使用 Suspense,但据我了解,它不适用于仅在组件上加载样式
<Suspense fallback={<Loading />}>
<SomeComponent />
</Suspense>
您可以使用标准 window.onload 事件。当加载所有外部资源(样式、图像)时会发生这种情况。
值得一提的是,如果组件本身内部加载了样式或图像,那么您必须将它们移到外部,否则会出现“闪烁”。
在安装App组件的index.js文件中,我们为window.onload事件分配一个处理程序,并将根据该事件本身安装App组件。
在事件发生之前,将安装加载器组件。
如何在后台加载图片到缓存