reactjs - 安静地加载音频和图像

Question

我正在使用 create-react-app 并让我们按如下方式调用资产.. 1000x Image 1000x svgs

在不同的屏幕上只加载了一个子集，而在主页上没有加载。例如在第 1 页，50 张图片和 50 张 svg .. 第 2 页 ... 75 张图片和 75 张 svg... 等等..

我想知道有没有办法在主页加载后..componentDidMount..

我可以开始预加载第 1 页的资产，然后将第 2 页等异步加载，这会是一个好习惯吗？

注意，我打算启用 PWA。那么，我应该将资产保存到 localStorage 还是已经由服务人员处理并且我的预加载器想法只需要完成它的事情？

我想要实现的是 1.在安装时获取所有资产的 PWA 2.在后台异步预加载所有资产

我是初级开发人员，因此将不胜感激任何帮助或指导。

标签： reactjsasynchronouscreate-react-apppreload

Answer 1

一旦点击<img />标签，浏览器将开始加载您的图像。

您可以先渲染图像，但使用display: none;.

create-react-app 使用cache-first策略，这意味着您导入的每个图像都将缓存在浏览器的缓存存储中。