静默加载音频和图像

Question

我正在使用create-react-app，并让我们按如下方式调用资产。1000x图像1000x服务

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

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

我可以开始预加载第1页的资源，然后异步加载第2页，这是一种好的做法吗？

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

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

我是初级开发人员，所以任何帮助或方向都将不胜感激。

Answer 1

一旦点击<img />标签，浏览器就会开始加载你的图片。

您可以先渲染图像，但使用display: none;隐藏它们。

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